CSS中的canvas元素

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、什么是canvas？

是HTML5新增的元素，通过使用脚本语言(JS)来在特定的区域绘制图形，可以制作照片集和简单的动画，也可以处理和渲染视频。

二、Canvas的基本使用

canvas 语法

<canvas id="first" width="300px" height="300px"></canvas>

canvas 元素

<canvas>标签和<img>其实是一样的，只是<canvas>只有两个属性：width和height。没有src和alt属性。<canvas>默认值为：width:300px,height:150px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas>的宽高。

替换内容

有些版本的浏览器不支持<canvas>,所以我们可以设置代替内容来显示。不支持的浏览器会直接渲染替代内容。

<canvas>
你的浏览器不支持 <canvas>，请升级你的浏览器
<canvas>

渲染上下文(Thre Rending Context);

<canvas>开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

var canvas=docunment.getElementById('first');
//获得2d上下文对象
var ctx= canvas.getContext('d2');

检测支持性

var canvas=document.getElementById('first');
if(canvas.getContext){var ctx = canvas.getContext('d2');
//drawing code here
}else{//not-supporting code here
}

三、绘制形状

栅格(giad)和坐标空间

如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200922170240436.png#pic_center)

绘制图形

canvas 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
canvas提供了三种方法绘制图形：

fillRect(x,y,width,height) 绘制一个填充的矩形。
strokeRect(x,y,width,height) 绘制一个矩形的边框。
clearRect(x,y,width,height) 清除一定的矩形区域。
注意：x,y是值矩形左上角的坐标。
width,height指定矩形的宽高。

function draw(){var canvas = document.getElementById('first');if(!canvas.getContext) return;var ctx = canvas.getContext('d2');ctx.fillRect(10,10 100,50);//默认绘制图形背景为黑色ctx.strokeRect(10,70,100,50);//绘制图形边框}draw();

ctx.clearRect(15,15 ,50,25);

四、绘制路径(path)

图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形需要一些额外的步骤：

创建路径起始点
调用绘制方法去绘制出路径
把路径封闭
一旦路径生成，通过描边或填充路径区域来渲染图形。

需要用到的方法：

1.beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径。
2.moveTo(x,y);
把画笔移到画布上指定的坐标(x,y)，相当于设置路径的起始位置。
3.closePath()
闭合路径之后，图形绘制命令会重新指向到上下文。
4.stroke()
通过线条来绘制图形的轮廓。
5.fill()
通过填充路径的内容区域来是路径实心化。

4.1 绘制线段

function draw{var canvas = document.getElementById('first');if(!cnavas.getContext) return;var ctx= canvas.getContext('d2');ctx.begin(); //新建一条路径ctx.moveTo(50,50);//将画笔移动到指定的坐标ctn.lineTo(200,50); //绘制一条从当前位置到指定坐标的路径//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做ctx.closePath(ctx.stroke();//绘制路径//ctx.fill(); //绘制实心}
draw();

4.2 绘制三角边框

function draw(){var canvas = document.getElementById('first');if(!canvas.getContent) return;var ctx = canvas.getContent('d2');ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(200,50);ctx.lineTo(200, 200);ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形ctx.stroke();//描边。stroke不会自动closePath()//ctx.fill();}draw();

4.3 填充三角形

function draw(){var canvas = document.getElementById('first');if(!canvas.getContext) return;var ctx = canvas.getContext('d2');ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(200,50);ctx.lineTo(200,200);ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}

4.4 绘制圆弧

有两种方法设置圆弧：
第一种：arc(x,y, r, startAngle,endAngle,anticlockwise)，以(x,y)为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束。anticlockwise是布尔值，true为逆时针，false为顺时针(默认为顺时针)。
注意：
1.这里的度数是弧度值。
2.0弧度是指的x轴正方向。

radians= (Math.PI/180)*degresss //角度转化为弧度

第二种：`arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

圆弧案例1：

function draw(){var canvas = document.getElementById('frist');
if(!cnavas.getContext) return;
var ctx = cnavas.getContext('d2');
ctx.beginPath();
ctx.arc(50,50,40,0, Math.PI/2, false);
ctx.stroke();}draw();

圆弧2:


function draw(){var canvas = document.getElementById('first');if(!canvas.getContext) return;var ctx = canvas.getContext('d2');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,0, -Math.PI/2, Math.PI/2  false);ctx.fill();ctx.beginPath();ctx.arc(50,150,40,0, -Math.PI/2, Math.PI/2  false);ctx.fill();
}
draw();

圆弧案例3

  function draw(){var canvas = document.getElementById('tutorial');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(50, 50);//参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径ctx.arcTo(200, 50, 200, 200, 100);ctx.lineTo(200, 200)ctx.stroke();ctx.beginPath();ctx.rect(50, 50, 10, 10);ctx.rect(200, 50, 10, 10)ctx.rect(200, 200, 10, 10)ctx.fill()
}
draw();

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

第 1 条切线：起始点和控制点1决定的直线。
第 2 条切线：控制点1 和控制点2决定的直线。
其实绘制的圆弧就是与这两条直线相切的圆弧。

4.5 绘制贝塞尔曲线

贝塞尔曲线又称贝兹曲线或者贝济埃曲线，是应用于二维图形应用程序的数学曲线。
一般的矢量图形软件通过它画出，贝兹曲线由线段和节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。
贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如 PhotoShop 等。在 Flash4 中还没有完整的曲线工具，而在 Flash5 里面已经提供出贝塞尔曲线工具。
贝塞尔曲线于 1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发，以稳定数值的方法求出贝兹曲线。
溢出贝塞尔曲线就是一条线

二次贝塞尔曲线

三次贝塞尔曲线

4.5.2 绘制贝塞尔曲线

公式：quadraticCurveTo(cp1x, cp1y,x,y)
说明：
- 参数 1 和 2：控制点坐标
- 参数 3 和 4：结束点坐标

function draw(){var canvas = document.getElementById('tutorial');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");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();}
draw();

绘制三次贝塞尔曲线:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
参数 1 和 2：控制点 1 的坐标
参数 3 和 4：控制点 2 的坐标
参数 5 和 6：结束点的坐标

function draw(){var canvas = document.getElementById('tutorial');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(40, 200); //起始点var cp1x = 20, cp1y = 100;  //控制点1var cp2x = 100, cp2y = 120;  //控制点2var 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();}
draw();

五、添加样式和样色

在前面我们设置的边框和填充是用的默认的颜色和样式。
同时，我们可以为其添加样式颜色。需要用到两个重要的属性。

fillStyle = color 设置图形填充的颜色。
strokeStyle = color 设置图形轮廓的颜色。

备注

color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。
默认情况下，线条和填充颜色都是黑色。
一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

fillStyle

 function draw(){ var canvas = document.getElementById('first');if(!canvas.getContext) return;var ctx = canvas.getContext('d2');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=(i*50,j*50,50,50);}}}draw();

strokeStyle

function draw(){var canvas = document.getElementById('first');
if(!canvas.getContext) return;
var ctx = canvas.getCotent('d2');
for(i=0;i<6;i++){for(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);}}}draw();/**返回随机的 [from, to] 之间的整数(包括from，也包括to)*/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.0。
起始点和终点的连线为中心，上下各占线宽的一半。
lineWidth = value :设置线条的宽度。

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();

lineCap = type
线条末端样式。
共有 3 个值：

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

var lineCaps = ["butt","round","square"];for(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.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(300,100);ctx.strokeStyle="red";
ctx.lineWidth=1;
ctx.stroke();

lineJoin=type
同一个 path 内，设定线条与线条间接合处的样式。
共有 3 个值 round, bevel 和 miter：

round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

function draw(){var canvas = getElementById('first');if(!canvas.getContext) return;var ctx = canvas.getContext('d2');var lineJoin = ['round','bevel','miter'];ctx.linewidth=20;for(i=0; i<lineJoin.length; i++){ctx.beginPath();ctx.moveTo(50, 50+50*i);ctx.lineTo(100,100+50*i);ctx.lineTo(150,50+50*i);ctx.lineTo(200,100+50*i);ctx.lineTo(250,50+50*i);}}draw();

虚线
用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。
备注： getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组。

function draw(){var canvas = document.getElementById('tutorial');if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]ctx.lineDashOffset = -0;ctx.strokeRect(50, 50, 210, 210);
}
draw();

5.渐变
线性渐变：createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

径向渐变：createRadialGradient(x1, y1, r1, x2,y2, r2)
createRadialGradient 方法接受 6个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

6.图案样式patterns
函数：createPattern(image, type)
该方法接受两个参数。Image可以是一个 Image 对象的引用，或者另一个 canvas 对象。
Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
createPattern（）方法

7.阴影Shadows

shadowOffsetX = float，shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

六、绘制文本

绘制文本的两种方法

canvas提供了两个方法
1.fillTest(text, x, y [, maxWidth])在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
2.strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

var ctx;
function draw(){var canvas = document.getElementById('tutorial');if (!canvas.getContext) return;ctx = canvas.getContext("2d");ctx.font = "100px sans-serif"ctx.fillText("天若有情", 10, 100);ctx.strokeText("天若有情", 10, 200)
}
draw();

给文本添加样式

font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。
textAlign = value 文本对齐选项。可选的值包括：start, end, left, right or center。默认值是 start。
textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

七、绘制图片

我们可以在canvas上直接绘制图片。
7.1. 由零开始创建图片

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'; // 设置图片源地址

7.2 绘制 img 标签元素中的图片
img 可以 new 也可以来源于我们页面的标签。

7.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 和 restoring state是绘制图像必不可少的操作。
save()和restore()
都是用来保存和恢复canvas()的状态。都没有参数。
canvas()即使当前画面应用所有的样式和变形的快照。
1.save():Canvas状态存储咋栈中，每当save()被调用后，当前的画面的状态的就会被保存在栈中。
一个绘画的状态：
1-1.当前应用的变形（即移动，旋转和缩放）
1-2.strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值，
1-3.当前的裁切路径（cliping path）
可以任意调用save()方法（相当于数组的push()）。

2.restore() 每一次调用的restore()方法，上一次保存的状态的就会被从栈中弹出，所有设定会恢复（相当于数组的pop()）。

var ctx;
function draw(){var canvas = document.getElementById('tutorial');if(!canvas.getContent) return;var ctx = canvas.getContent("2d");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(); //使用加载的配置绘制一个矩形
}
drow();

九、变形

9.1 translate

translate(x,y) 用来移动canvas 的原点到指定的位置
注意：translate移动的是canvas的坐标原点（坐标变换）

var ctx;
function draw(){var canvas = document.getElementById('tutoruial1');if(!canvas.getContent)return;var ctx = canvas.getContext("2d");ctx.save(); //保存坐原点平移之前的状态ctx.translate(100,100);ctx.strokeRect(0,0,100,100)ctx.restore();//恢复到最初状态ctx.translate(220 ,220);ctx.fillRect(0,0,100,100);
}
draw();

9.2 rotate

rotate(angle) //旋转角度

以弧度为单位值。旋转中心是坐标原点。

var ctx;
function draw(){var canvas = documnt.getElementById('tutorial1');if(!canvas.getContent) return;var ctx = canvas.getContent("2d");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();
}
draw();

9.3 scale

scale(x,y)

用来增减图形在canvas中的像素数目，对形状、位图进行缩放。
默认为1.

9.4 transform(变形矩阵)

transform(a, b,c,d,e,f)

a (m11): Horizontal scaling.
b (m12): Horizontal skewing.
c (m21): Vertical skewing.
d (m22): Vertical scaling.
e (dx): Horizontal moving.
f (dy): Vertical moving.

var ctx;
function draw(){var canvas=document.getElementById('tutorial1');if(!canvas.getContent) return;var ctx = canvas.getContent("2d");ctx.transform(1,1,0,1,0,0);ctx.fillRect(0,0,100,100);
}
draw();

十、合成

对于合成的图形来说，绘制顺序会有限制。利用globalCompositeOperation属性拉改变这种状态。

var ctx;
function draw(){var canvas = document.getElementById('tutorial1');if(!canvas.getContent) return;vae ctx = canvas.getContent("2d");ctx.fillStyle = "blue";ctx.fillRect = (0,0,200,200);ctx.globalCompsiteOperation = "source-over"; //全局合成操作ctx.fillStyle = "red";ctx.fillRect(100,100,200,200)
}
draw();

type值包括 13种字符串值之一：
default/source-in/source-out/source-atop/destination-over/destination-in/destination-out/edstination-atop/lighter/darken/lighter/Xor/copy

十一、裁剪路径

clip() // 把已经创建的路径转换为裁剪路径

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

var ctx;
dunction draw(){var canvas = document.getElementById('tutorial1');if(!canvas.getContent) return;var ctx = canvas;getContent("2d");ctx.beginPath();ctx.arc(20,20,100,0,Math.PI*2);ctx.clip();ctx.clipStyle = "park";ctx.fillRect(20,20,100,100);
}
draw();

十二、控制动画

可以通过canvas的方法或者自定义的方法把图像绘制到canvas上。为了执行动画，我们需要一些可以定时执行重绘的方法。
1.setInterval()
2.setTimeout()
3.requestAnimationFrame()