【Web2D/3D】Canvas（第三篇）

1. 前言

        <canvas>是HTML5新增元素，它是一个画板，开发人员基于它的2D上下文或webgl上下文，使用JS脚本绘制简单的动画、可交互画面，甚至进行视频渲染。

        本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。

2. canvas元素

        2D坐标系：左上点是坐标原点(0,0)，x轴正方向向右，y轴正方向向下，x正方向为弧度0。

        视口viewport：canvas宽高确定视口大小，默认宽高(300px, 150px)。

        canvas元素是HTMLCanvasElement实例化对象，以下列出HTMLCanvasElement原型对象的方法和属性。

方法和属性	描述	示例
HTMLCanvasElement .prototype.getContext()	功能：获取一个渲染上下文 输入：‘2d’ | 'webgl' | 'experimental-webgl' 输出：CanvasRenderingContext2D	const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');
HTMLCanvasElement .prototype.toDataURL()	<略>	<略>
HTMLCanvasElement .prototype.toBlob()	<略>	<略>
HTMLCanvasElement .prototype.captureStream()	<略>	<略>
HTMLCanvasElement .prototype .transferControlToOffscreen()	<略>	<略>
HTMLCanvasElement .prototype.width	功能：设置画布的宽度，默认300px，不建议使用css设置width	<canvas id="canvas" width="500" height="450">   不支持canvas </canvas>
HTMLCanvasElement .prototype.height	功能：设置画布的高度，默认150px，不建议使用css设置height

ctx是CanvasRenderingContext2D的实例化对象，CanvasRenderingContext2D原型对象的方法和属性如下。

方法和属性	描述	示例
绘制矩形
CanvasRenderingContext2D .prototype.fillRect(x,y, width, height)	功能：绘制一个填充矩形 输入： x 矩形左上角x轴坐标 y 矩形左上角y轴坐标 width 矩形宽度 height 矩形高度	ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
CanvasRenderingContext2D .prototype.strokeRect(x,y, width, height)	功能：绘制一个描边矩形 输入：同fillRect的参数	ctx.strokeRect(10, 70, 55, 50);
CanvasRenderingContext2D .prototype.clearRect(x,y, width, height)	功能：清除指定的矩形区域，清除后这块区域变透明 输入：同fillRect的参数	ctx.clearRect(15, 15, 50, 25);
绘制路径
CanvasRenderingContext2D .prototype.beginPath()	功能：新建一条路径 输入：无	ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); ctx.stroke(); // 绘制出一个三角形 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.fill(); // 绘制出一个三角形，并填充黑色
CanvasRenderingContext2D .prototype.moveTo(x,y)	功能：移动画笔到坐标x,y 输入： x 位置的x轴坐标 y 位置的y轴坐标
CanvasRenderingContext2D .prototype.lineTo(x,y)	功能：定义一条从当前位置到目标点x,y的直线 输入： x 目标点的x轴坐标 y 目标点的y轴坐标
CanvasRenderingContext2D .prototype.closePath()	功能：闭合路径
CanvasRenderingContext2D .prototype.stroke()	功能：绘制路径
CanvasRenderingContext2D .prototype.fill()	功能：填充闭合区域，如果路径未闭合，fill()会自动将路径闭合
CanvasRenderingContext2D .prototype.arc(x , y, r, startAngle, endAngle, anticlockwise)	功能：绘制圆弧，以x,y为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束，anticlockwise true表示逆时针，false表示顺时针，默认false 注：弧度0表示x轴正方向	ctx.beginPath(); ctx.arc(150, 50, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill();
CanvasRenderingContext2D .prototype.arcTo(x1, y1, x2, y2, radius)	功能：绘制圆弧，以x1,y1和x2,y2为控制点，以radius为圆弧半径 注：圆弧与当前点到x1,y1直线，以及x1,y1到x2,y2直线相切	ctx.beginPath(); ctx.moveTo(50, 50); ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke();
CanvasRenderingContext2D .prototype.quadraticCurveTo(cpx1, cpy1, x, y)	功能：以cpx1,cpy1为控制点，以x,y为终点，绘制二次贝塞尔曲线	ctx.beginPath(); ctx.moveTo(10, 200); const cpx1=40, cpy1=100; const x=200, y=200; ctx.quadraticCurveTo(cpx1, cpy1, x, y); ctx.stroke();
CanvasRenderingContext2D .prototype.bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);	功能：以cpx1,cpy1和cpx2,cpy2为控制点，以x,y为终点，绘制三次贝塞尔曲线	ctx.beginPath(); ctx.moveTo(40, 200); const cpx1=20, cpy1=100; const cpx2=100, cpy2= 20; const x=200, y=200; ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke();
CanvasRenderingContext2D .prototype.getLineDash()	功能：获取当前虚线样式 输入：无 输出：Array<number>	ctx.setLineDash([20, 5]); ctx.lineDashOffset = 0; ctx.strokeRect(50, 50, 210, 210); const arr = ctx.getLineDash()
CanvasRenderingContext2D .prototype.setLineDash(widthArr)	功能：设置线段与间隙长度的交替 输入：Array<number>
CanvasRenderingContext2D .prototype.lineDashOffset = offset	功能：设置起始偏移量
CanvasRenderingContext2D .prototype.fillStyle = color	功能：设置图形填充颜色，默认黑色 输入：color 颜色值 | 渐变对象 | 图案对象	ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
CanvasRenderingContext2D .prototype.strokeStyle = color	功能：设置图形描边颜色，默认黑色 输入：color 颜色值 | 渐变对象 | 图案对象	ctx.strokeStyle = "rgb(200,0,0)"; ctx.strokeRect (10, 10, 55, 50);
CanvasRenderingContext2D .prototype.lineWidth = width	功能：设置线宽度，正值，默认1.0，起点和终点连续中心，上下线宽各占一半	ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineTo(100, 100); ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.lineJoin = 'miter'; ctx.stroke();
CanvasRenderingContext2D .prototype.lineCap = type	功能：线条末端样式 输入：butt | round | square
CanvasRenderingContext2D .prototype.lineJoin = type	功能：同一个path内，设置线条和线条间接合处的样式 输入：round | bevel | miter
绘制文本
CanvasRenderingContext2D .prototype.fillText(text, x, y, maxWidth?)	功能：在指定位置x,y填充指定文本text，绘制最大宽度可选	ctx.font = "100px sans-serif"; ctx.fillText("热爱技术", 10, 100); ctx.strokeText("热爱技术", 10, 200)
CanvasRenderingContext2D .prototype.strokeText(text, x, y, maxWidth?)	功能：在指定位置x,y描边指定文本text，绘制最大宽度可选
CanvasRenderingContext2D .prototype.font = font	功能：绘制文本的样式，默认'10px sanf-serif'
CanvasRenderingContext2D .prototype.textAlign = align	功能：文本对齐方式，默认alphabetic 输入：top | hanging | middle | alphabetic | ideographic | bottom
CanvasRenderingContext2D .prototype.direction = direction	功能：文本方向，默认inherit 输入：ltr | rtl | inherit
绘制图像
CanvasRenderingContext2D .prototype.drawImage(image, x, y, width?, heigth?)	功能：绘制图片 输入： image: HTMLImageElement, x 开始绘制位置的x轴坐标 y 开始绘制位置的y轴坐标 width 绘制的图片宽度 height 绘制的图片高度 注：Image继承于HTMLImageElement
CanvasRenderingContext2D .prototype.drawImage(image, sx, sy, sWidth, sHeigth, dx, dy, dWidth, dHeigth)	功能：绘制图片 输入： image: HTMLImageElement, sx,sy,sWidth,sHeight 从源图像扣图位置和大小 dx,dx,dWidth,dHeight 在canvas目标中显示位置和大小
状态的保存和恢复
CanvasRenderingContext2D .prototype.save()	功能：将canvas当前状态保存到栈中，入栈	ctx.fillRect(0, 0, 150, 150); ctx.save();  ctx.restore();
CanvasRenderingContext2D .prototype.restore()	功能：将上一次保存的状态从栈弹出，出栈
变换
CanvasRenderingContext2D .prototype.translate(x,y)	功能：将canvas原点移动到指定位置x,y 输入： x 目标位置的x轴坐标 y 目标位置的y轴坐标	ctx.save(); ctx.translate(100, 100); ctx.strokeRect(0, 0, 100, 100) ctx.restore(); ctx.translate(220, 220); ctx.fillRect(0, 0, 100, 100);
CanvasRenderingContext2D .prototype.rotate(angle)	功能：将canvas坐标轴顺时针旋转一个角度	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();
CanvasRenderingContext2D .prototype.scale(x,y)	功能：将canvas坐标轴横纵按比例缩放 输入： x x轴缩放比例 y y轴缩放比例
CanvasRenderingContext2D .prototype.transform(a,b,c,d,e,f) a c e b d f  0 0 1	功能：变换矩阵 a x轴缩放比例  b x轴skew c y轴skew d y轴缩放比例 e x轴平移量 f y轴平移量	ctx.transform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100);
合成
CanvasRenderingContext2D .prototype.globalCompositeOperation  = type	功能：设置图形合成方式，默认不设置，新图像覆盖原图像 输入： 1. soure-in 仅新图像与老图像重叠部分，其它区域透明 2. soure-out 新图像与老图像不重叠部分，老图像不显示 3. source-atop 新图像仅显示与老图像重叠部分，老图像仍显示 4. destination-over 新图像在老图像下面 5. destination-in  仅老图像与新图像重叠部分，其它区域透明 6. destination-out 老图像与新图像不重叠部分，新图像不显示 7. destination-atop: 老图像仅显示重叠部分，新图像在老图像下面 8. lighter 新老图像都显示，相加操作 9. darken 保留重叠部分最黑的像素，位与操作 10. lighten 保留重叠部分，位域操作 11. xor，异或操作 12. copy 仅新图像保留，其它区域透明	<略>
裁剪路径
CanvasRenderingContext2D .prototype.clip()	功能：将已创建的路径转换成裁剪路径，仅显示裁剪区域，隐藏裁剪路径外的区域	<略>

有兴趣的同学可以参见：学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程 (runoob.com)

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~