眼前你起来在学习canvas,准备把上学canvas的整整学习进程个中的有的笔记与总括记录下来,如有何不足之处还请大神们何其提议。

 

1. canvas介绍

Canvas成分的面世,能够说开启的Web世界绘制动画,图形的大门,其功效极度强劲
canvas
成分是HTML5中功效最强劲的因素,它的手艺首借使由此Canvas中的Context(绘图上下文/绘图情况)对象表现出来的。该对象从canvas自个儿获得。

var canvas = getElementById('canvas');
var context = canvas.getContext('2d');

 

二. canvas的后备内容

Canvas成分之间含有的文本,这种文本称为
“后备内容”,只有在浏览器不帮忙canvas元素时才会展现该文件内容

<canvas>当前浏览器不支持canvas元素,请更换浏览器</canvas>

 

3. Canvas的尺寸

永利开户送38元体验金,canvas成分时暗中同意宽为300px、高为150px。

大家能够透过canvas的width,height属性去修改canvas的大大小小,大家也可由此CSS去修改canvas成分的尺寸。可是两岸的修改是有分其余。

canvas实际上有两套尺寸:

3个是canvas成分的深浅,一个是canvas绘图表面包车型地铁深浅。

当大家用canvas的品质width,height时其实大家同时修改了成分的大大小小与绘图表面包车型客车大大小小

当我们用CSS来设定期,是会修改canvas成分的高低,不会影响绘图表面包车型地铁大小,那时浏览器就能够对绘图表面缩放,会产出我们不想赢得的法力

 

width与height属性修改canvas尺寸大小时的表现

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
</script>

 

永利开户送38元体验金 1

 

用CSS去修改canvas成分尺寸大小时的变现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>
        #canvas {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<img src="" alt="永利开户送38元体验金 2" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
</script>
</body>
</html>

 

永利开户送38元体验金 3

所以大家在装置Canvas元素的大大小小时,最佳不用选用CSS去设置,大家能够那样去设置

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</canvas>

 或者

<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有px
canvas.height = '300';
</script>

 

 

4. canvas API

canvas元素并未有提供大多API,它只提供了七个属性多个法子,而绘图成效的艺术与脾气全是canvas的绘图际遇(context)对象提供。

  1. width:设置/获取canvas成分绘图表面包车型客车增加率,暗中认可值为300。
  2. height:设置/获取canvas成分绘图表面包车型大巴可观,暗中认可值为150。
  3. getContext():
    再次回到canvas成分的绘图景况目的。
  4. toDataU冠道L(): 描述:再次来到3个data
    USportageI:会依赖type钦赐的参数方式将canvas中的图片编码成二个UTF-16字符串的样式。
  5. toBold(): 描述:创造Blob对象,用以突显canvas上的图片;那一个图片文件能够被缓存或保存到本地,由User
    Agent( 用户代理端 )自行决定。

  

toDataURL():

    type 可选参数

  图片格式,默感觉 image/png

  encoderOptions 可选参数

  当图片格式为 image/jpeg 或
image/webp的场地下,能够从 0 到 一 的间距内接纳图片的材料。

  假诺超过取值范围,将会使用暗中认可值
0.九二,默许分辨率为九6dpi。

   这里值得注意:

  • 只要canvas的中度或许增幅为0时,会回到字符串
    “data:,”
  • 假若传入的品类不是
    “image/png”, 不过重临的值以 “data:
    image/png”开首,表达传入的门类不支持
  • Chrome支持“image/webp”类型

  尽管在暗中同意意况下canvas对象是1副位图,可是并不是HTML中的img成分,所以我们得以选择toDataU福特ExplorerL方法创造1幅表示canvas的图像;也足以运用此方法创制和操作缓冲canvas。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>
        #canvas {
            margin: 0 auto;
            padding: 0;
            display: none;
        }
    </style>
</head>
<body>
<img src="" alt="永利开户送38元体验金 4" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var dataImage = document.getElementById('dataImage');
    canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有px
    canvas.height = '300';
    var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    var dataUrl = canvas.toDataURL();
    dataImage.src = dataUrl;
</script>
</body>
</html>

 

 

 

toBold():

脚下该格局唯有Firefox与IE10浏览器帮助


 

参照小说:

MDN Web
技艺文书档案

 

相关文章