HTML5——Canvas

 一、canvas简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

​ 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。

 

二、canvas基本使用

2.1<canvas>元素

<canvas id="tutorial" width="300" height="300"></canvas>

<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

​ 如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

###替换内容

​ 由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素<canvas>，在这些浏览器上你应该总是能展示替代内容。

​ 支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。

2.2基本使用

        ctx.moveTo(100, 100);    //画笔起点
        ctx.lineTo(200, 100);    
        ctx.lineTo(200, 200);
        ctx.lineTo(100, 200);
        ctx.lineTo(100, 100);    //绘图终点
        ctx.strokeStyle = 'red'; //绘图
        ctx.closePath(); //闭合路径，可以省略最后一步
        ctx.stroke();
        ctx.beginPath();  //另起路径
        ctx.moveTo(400, 100);
        ctx.lineTo(500, 200);
        ctx.lineTo(300, 200);
        ctx.lineTo(400, 100);
        ctx.strokeStyle = 'green';  //描边
        ctx.fillStyle = 'green';    //填充
        ctx.fill();                 //填充执行
        ctx.stroke();               //描边执行

2.3绘制一个三角形

接下来我们来看看具体是怎么使用的

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);
    ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
    ctx.stroke(); //描边。stroke不会自动closePath()

2.4填充三角形

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);
   
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

2.5绘制矩形

        ctx.rect(100, 100, 100, 100);   //前面两个值是x, y; 后面两个值是元素的宽高
        // ctx.stroke();
        ctx.fill();

    ctx.fillRect(100, 100, 100, 100);  //填充矩形，不需要执行填充就可以画出一个矩形

    ctx.strokeRect(300, 100, 100, 100);  //描边矩形，不需要执行描边就可以画出一个矩形

2.6清理画布

就是清空整个画布上面的所有东西，前面两个值是坐标，后面两个值是整个画布的大小

ctx.clearRect(0, 0, 600, 600); //橡皮擦功能，就是清理整个画布

2.7做个小demo，练习一下

        ctx.fillRect(100, 100, 100, 100); //先画出一个方块
        var y = 0;
        var x = 0; //定义一个y值,x值等于100
        items = setInterval(function () { //开启一个定时器每100毫秒执行一次
            ctx.clearRect(0, 0, 600, 600); //每次执行定时器前先清理整个画布
            ctx.fillRect(x, y, 100, 100); //把值赋给小方块的值
            y += 10;
            x += 10; //每次执行定时期时y值,x值增加10，也就是向下移动10
            if (y > 500 && x > 500) { //当y值，x值大于500时
                clearInterval(items); //清理定时期，小方块停止运动
            }
        }, 100)

 2.8绘制圆弧

1.arc(x, y, r, startAngle, endAngle, anticlockwise):

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：

    　　(1) 这里的度数都是弧度。 
    　　(2) 0弧度是指的x轴正方形

radians=(Math.PI/180)*degrees //角度转换成弧度

2.arcTo(x1, y1, x2, y2, radius):

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

 

demo1

        ctx.arc(100, 100, 50, 0,Math.PI * 2, true);  //可传入6个参数
        // 第一个值和第二个值为圆形坐标，是以圆的中心点
        // 第三个值是圆的半径
        // 第四个值是起始弧度
        // 第五个值是结束弧度
        // 第六个值是弧形方向，false为顺时针，true为逆时针
        ctx.stroke();

demo2

        ctx.beginPath();
        ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(150, 150, 40, 0, Math.PI, false);
        ctx.fill();

arcTo方法的说明：

​ 这个方法可以这样理解。绘制的弧形是由两条切线所决定。

​ 第 1 条切线：起始点和控制点1决定的直线。

​ 第 2 条切线：控制点1 和控制点2决定的直线。

​ 其实绘制的圆弧就是与这两条直线相切的圆弧。

 2.9绘制贝塞尔曲线

2.9.1

一次贝塞尔曲线

二次贝塞尔曲线

三次贝塞尔曲线

2.9.2

绘制二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

说明：

​ 参数1和2：控制点坐标

​ 参数3和4：结束点坐标

        ctx.beginPath();
        ctx.moveTo(10, 200); //起始点
        var cp1x = 40,
            cp1y = 100; //控制点
        var x = 200,
            y = 200; // 结束点
        //绘制二次贝塞尔曲线
        ctx.quadraticCurveTo(cp1x, cp1y, x, y);
        ctx.stroke();

        ctx.beginPath();
        ctx.rect(10, 200, 10, 10);
        ctx.rect(cp1x, cp1y, 10, 10);
        ctx.rect(x, y, 10, 10);
        ctx.fill();

绘制三次贝塞尔曲线

    ctx.beginPath();
    ctx.moveTo(40, 200); //起始点
    var cp1x = 20, cp1y = 100;  //控制点1
    var cp2x = 100, cp2y = 120;  //控制点2
    var x = 200, y = 200; // 结束点
    //绘制二次贝塞尔曲线
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    ctx.stroke();

    ctx.beginPath();
    ctx.rect(40, 200, 10, 10);
    ctx.rect(cp1x, cp1y, 10, 10);
    ctx.rect(cp2x, cp2y, 10, 10);
    ctx.rect(x, y, 10, 10);
    ctx.fill();

三、添加样式

​ 在前面的绘制矩形章节中，只用到了默认的线条和颜色。

​ 如果想要给图形上色，有两个重要的属性可以做到。

1. fillStyle = color

   设置图形的填充颜色

2. strokeStyle = color

   设置图形轮廓的颜色

 

　　fillstyle

  for (var i = 0; i < 6; i++){
    for (var j = 0; j < 6; j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
        Math.floor(255 - 42.5 * j) + ',0)';
      ctx.fillRect(j * 50, i * 50, 50, 50);
    }
  }

 

 　　strokestyle

        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }

        function randomInt(from, to) {
            return parseInt(Math.random() * (to - from + 1) + from);
        }

Transparency(透明度)
globalAlpha = transparencyValue

​ 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

​ globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。

 

line style

1. lineWidth = value

线宽。只能是正值。默认是1.0。

起始点和终点的连线为中心，上下各占线宽的一半

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineWidth = 10;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(110, 10);
ctx.lineTo(160, 10)
ctx.lineWidth = 20;
ctx.stroke()

2. lineCap = type

 

线条末端样式。

共有3个值：

1. butt：线段末端以方形结束

2. round：线段末端以圆形结束

3. square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++){
    ctx.beginPath();
    ctx.moveTo(20 + 30 * i, 30);
    ctx.lineTo(20 + 30 * i, 100);
    ctx.lineWidth = 20;
    ctx.lineCap = lineCaps[i];
    ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100)

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();

3. lineJoin = type

 

同一个path内，设定线条与线条间接合处的样式。

共有3个值round, bevel 和 miter：

round

通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

bevel

在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

miter(默认)

通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

 

    var lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 20;

    for (var i = 0; i < lineJoin.length; i++){
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();

4. 虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量.

    var ctx = canvas.getContext("2d");
    
    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);

备注：

​ getLineDash():返回一个包含当前虚线样式，长度为非负偶数的数组。

四、绘制文本
绘制文本的两个方法
canvas 提供了两种方法来渲染文本:

1. fillText(text, x, y [, maxWidth])

　　在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

2. strokeText(text, x, y [, maxWidth])

　　在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

    ctx.font = "50px sans-serif"
    ctx.fillText("屏幕前的你很帅", 10, 100);
    ctx.strokeText("屏幕前的你很帅", 10, 200)

给文本添加样式
1.font = value

　　当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。

2.textAlign = value

　　文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

3.textBaseline = value

　　基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

4.direction = value

　　文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

 五、绘制图片

​ 我们也可以在canvas上直接绘制图片。

5.1 由零开始创建图片

创建<img>元素

var img = new Image();   // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址

脚本执行后图片开始装载

绘制img

//参数1：要绘制的img  参数2、3：绘制的img在canvas中的坐标
ctx.drawImage(img,0,0); 

注意：

​ 考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。

var img = new Image();   // 创建img元素
img.onload = function(){
  ctx.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 设置图片源地址

5.2绘制img标签元素中的图片

 ​ img 可以 new 也可以来源于我们页面的 <img>标签

<img src="自己引入图片" alt="" width="300"><br>

<canvas id="tutorial" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(){
var cav = document.getElementById('cav');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var img = document.querySelector("img");
ctx.drawImage(img, 0, 0);
}
document.querySelector("img").onclick = function (){
draw();
}

</script>

5.3缩放图片

drawImage() 也可以再添加两个参数：

​ drawImage(image, x, y, width, height)

​ 这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小。

ctx.drawImage(img, 0, 0, 400, 200)

7.4 切片(slice)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

​ 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。

其他8个参数：

​ 前4个是定义图像源的切片位置和大小，

​ 后4个则是定义切片的目标显示位置和大小。

 

六、状态的保存和恢复

Saving and restoring state是绘制复杂图形时必不可少的操作。

save()和restore()

​ save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

​ Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

1. 关于 save()

　　Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

★ 当前应用的变形（即移动，旋转和缩放）

★ strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

★ 当前的裁切路径（clipping path）

​

可以调用任意多次 save方法。(类似数组的push())

2. 关于restore()

　　每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。(类似数组的pop())

    ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
    ctx.save();                  // 保存默认状态

    ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
    ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

    ctx.save();                  // 保存当前状态
    ctx.fillStyle = '#FFF'       // 再次改变颜色配置
    ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

    ctx.restore();               // 重新加载之前的颜色状态
    ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

    ctx.restore();               // 加载默认颜色配置
    ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形

七、变形

 7.1translate

translate(x, y)

​ 用来移动 canvas 的原点到指定的位置

​ translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。

在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又如果你是在一个循环中做位移但没有保存和恢复canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。

​ 注意：translate移动的是canvas的坐标原点。(坐标变换)

 

    ctx.save(); //保存坐原点平移之前的状态
    ctx.translate(100, 100);
    ctx.strokeRect(0, 0, 100, 100)
    ctx.restore(); //恢复到最初状态
    ctx.translate(220, 220);
    ctx.fillRect(0, 0, 100, 100)

7.2 rotate

rotate(angle)

​ 旋转坐标轴。

​ 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

​ 旋转的中心是坐标原点

 

ctx.fillStyle = "red";
  ctx.save();

  ctx.translate(100, 100);
  ctx.rotate(Math.PI / 180 * 45);
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 100, 100);
  ctx.restore();

  ctx.save();
  ctx.translate(0, 0);
  ctx.fillRect(0, 0, 50, 50)
  ctx.restore();

7.3 scale

scale(x, y)

​ 我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。

​ scale方法接受两个参数。x,y分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

​ 默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

 八、合成

在前面的所有例子中、，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用 globalCompositeOperation 属性来改变这种状况。

globalCompositeOperation = type

        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, 200, 200);

        ctx.globalCompositeOperation = "source-over"; //全局合成操作
        ctx.fillStyle = "red";
        ctx.fillRect(100, 100, 200, 200);

注：下面的展示中，蓝色是原有的，红色是新的。

type `是下面 13 种字符串值之一：

##1. source-over(default)

这是默认设置，新图像会覆盖在原有图像

 

##2. source-in

仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)

##3. source-out

仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)

 

##4. source-atop

新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。

##5. destination-over

新图像会在老图像的下面。

 

 

##6. destination-in

仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。

 

 

##7. destination-out

仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。

 

 

##8. destination-atop

老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。

 

 

##9. lighter

新老图像都显示，但是重叠区域的颜色做加处理

 

 

##10. darken

保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)

blue: #0000ff

red: #ff0000

所以重叠部分的颜色：#000000

 

 

##11. lighten

保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)

blue: #0000ff

red: #ff0000

所以重叠部分的颜色：#ff00ff

 

 

##12. xor

重叠部分会变成透明

 

 

##13. copy

只有新图像会被保留，其余的全部被清除(边透明)

 

#十一、裁剪路径

clip()

​ 把已经创建的路径转换成裁剪路径。

​ 裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。

​ 注意：clip()只能遮罩在这个方法调用之后绘制的图像，如果是clip()方法调用之前绘制的图像，则无法实现遮罩。

 

ctx.beginPath();
    ctx.arc(20,20, 100, 0, Math.PI * 2);
    ctx.clip();
    
    ctx.fillStyle = "pink";
    ctx.fillRect(20, 20, 100,100);

九、动画

动画的基本步骤
1.清空canvas

　　再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是clearRect()方法

2.保存canvas状态

　　如果在绘制的过程中会更改canvas的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下canvas的状态

3.绘制动画图形

　　这一步才是真正的绘制动画帧

4.恢复canvas状态

　　如果你前面保存了canvas状态，则应该在绘制完成一帧之后恢复canvas状态。

控制动画
我们可用通过canvas的方法或者自定义的方法把图像会知道到canvas上。正常情况，我们能看到绘制的结果是在脚本执行结束之后。例如，我们不可能在一个 for 循环内部完成动画。

也就是，为了执行动画，我们需要一些可以定时执行重绘的方法。

一般用到下面三个方法：

setInterval()
setTimeout()
requestAnimationFrame()

来源：https://www.cnblogs.com/yangpeixian/p/11343542.html