前端培训-中级阶段（26）- Canvas 绘图（2019-11-21期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

canvas 是 HTML5 新增加的功能，用于操作绘制图片。
可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
主要操作2D图形。也可以绘制3D图形。

canvas 实战

1. 刮刮卡。刮刮卡效果实现、demo

   1. globalCompositeOperation、drawImage、节点记录自动化
   2. ctx.globalCompositeOperation = 'destination-out'

2. 国庆头像。蹭热点，请给我一面国旗@微信官方、demo

   1. tranform、canvas、drawImage、toDataURL

canvas 标签

1. 操作需要使用DOM，所以一般给一个ID来方便查找
2. height 为画布真实高度。单位：px。默认高度 150px。
3. width 为画布真实宽度。单位：px。默认宽度 300px。
4. 标签上的属性为画布宽高，css设置宽高为展示宽高。意义是不同的。
5. HTMLCanvasElement 为 canvas 标签的 DOM 对象。

canvas 属性

1. height 对应标签上的 height 属性
2. width 对应标签上的 width 属性

canvas 方法

ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 300, 300)

1. getContext() 返回绘制上下文环境对象。我们需要使用返回的对象操作图形。
2. toBlob() 将图片输出为Blob类型、异步
3. toDataURL() 将图片输出为DataURL类型、同步

canvas.getContext(contextType[, contextAttributes])

ctx = canvas.getContext(contextType[, contextAttributes])

1. contextType 需要传入需要返回的对象类型

   1. '2d' 返回 CanvasRenderingContext2D对象，用来进行2D绘制。
   2. 'webgl'或'experimental-webgl' 返回WebGLRenderingContext（WebGL渲染上下文）对象，用于使用 webgl 进行 3D绘制。提供硬件3D加速渲染。对应的WebGL1（OpenGL ES 2.0）
   3. 'webgl2' 返回 WebGL2RenderingContext 对象，也是用于3D绘制。只不过对应 WebGL2（OpenGL ES 3.0）
   4. 'bitmaprenderer' 返回 ImageBitmapRenderingContext

2. contextAttributes 可选

   1. alpha 开启透明

canvas.toBlob(callback, mimeType, quality);

该操作是异步的，所以需要传入callback。

1. callback 处理完成的回调函数。回调的第一个参数为blob。
2. mimeType 需要转换的图片类型，默认为image/png。
3. quality 图片质量，默认为0.92。

canvas.toDataURL(mimeType, quality);

该操作是同步的，所以大图片会卡。
data:[][;base64], DataURL的格式。

1. mimeType 需要转换的图片类型，默认为image/png。
2. quality 图片质量，默认为0.92。

跨域问题

1. 图片服务器需要配置Access-Control-Allow-Origin

2. 设置图片的crossOrigin

    var img = new Image();
    img.crossOrigin = '';
    img.onload = function () {};
    img.src = url;

CanvasRenderingContext2D

线条样式

测试地址

1. ctx.lineWidth 宽度。默认值：1，可以有小数。单位：px

2. ctx.lineCap 端点样式，路径起点和终点

   1. butt 默认值，严格按照坐标点绘制。
   2. round 圆形，端点处lineWidth为直径画圆。
   3. square 方形，线的端点多出一个方块，lineWidth 是一样，长度度是 lineWidth/2。

3. ctx.lineJoin 转角样式，路径中的转折点

   1. miter 尖角，默认值。如果夹角比较小，则尖头会非常长。miterLimit可以限制尖头最长尺寸，长度大于限制值的会使用bevel来处理。
   2. round 圆角，转折点处lineWidth为直径画圆。
   3. bevel 平角，转折点直接截断。
4. ctx.miterLimit 尖角限制阈值，针对线条粗角度小的情况。默认值：10。如果ctx.lineJoin=miter时，长度超出则使用平角显示，如果长度不超出使用尖角显示。
5. ctx.lineDashOffset 虚线起始偏移量

6. ctx.setLineDash() 设置虚线数值，数组。

   1. [5]等价于[5,5]。
   2. [5,5]等价于实线5px虚线5px
   3. [1,2,3]等价于[实线1px,虚线2px,实线3px]
   4. [1,2,3,4]等价于[实线1px,虚线2px,实线3px,虚线4px]
   5. 以此类推
7. ctx.getLineDash() 获取虚线数值，数组。

文本样式

1. font 字号、字体。

   1. ctx.font='20px monospace'

2. textAlign 水平对齐方式。start（默认值）、end、left、right、center。 测试地址

   1. start 表示指定的坐标为开始坐标（左边、direction 时会自动变化）。
   2. end 表示指定的坐标为结束坐标（右边、direction 时会自动变化）。
   3. left 表示指定的坐标为左边坐标。
   4. right 表示指定的坐标为右边坐标。
   5. center 表示指定的坐标为中心点。

3. textBaseLine 基线对齐方式。top、hanging、middle、alphabetic（默认值）、ideographic、bottom。测试地址

   1. top 表示指定的坐标为文本顶点坐标。
   2. hanging 藏文和其他印度文字中使用
   3. middle 表示指定的坐标为文本垂直中心坐标。
   4. alphabetic 表示指定的坐标为文本基线坐标。
   5. ideographic 表示指定的坐标为文本底部坐标。
   6. bottom 表示指定的坐标为文本底部坐标。
4. direction 控制文本方向
   chrome中此特性默认是无效的。 通过 ExperimentalCanvasFeatures 特征标识进行启用。

填充绘制

1. ctx.fillStyle 填充颜色。默认为#000黑色

2. ctx.fillRect() 填充指定区域

   1. ctx.fillRect(x, y, width, height);

3. ctx.fillText() 在指定区域绘制文本

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

4. ctx.fill() 填充，需要有路径，会自动闭合路径

   1. ctx.fill()、ctx.fill(fillRule)、ctx.fill(path, fillRule)
   2. fillRule 为填充规则 nonzero、evenodd。搞懂SVG/Canvas中nonzero和evenodd填充规则 张鑫旭

描边绘制

1. ctx.strokeStyle 描边颜色。默认为#000黑色

2. ctx.strokeRect() 描边指定区域

   1. ctx.strokeRect(x, y, width, height);

3. ctx.strokeText() 在指定区域绘制文本描边

   1. ctx.strokeText(text, x, y [, maxWidth]);

4. ctx.stroke() 描边，需要有路径，会自动闭合路径

   1. ctx.fill()、ctx.fill(path)

阴影

1. ctx.shadowBlur 阴影模糊大小，默认值：0
2. ctx.shadowColor 阴影颜色，默认值：透明
3. ctx.shadowOffsetX 阴影X轴偏移量，默认值：0
4. ctx.shadowOffsetY 阴影Y轴偏移量，默认值：0

路径

1. ctx.beginPath() 开启一个新路径
2. ctx.closePath() 关闭路径绘制，区别在于描边时。
   如果路径没有闭合，不关闭路径绘制会出现自动闭合的情况。
   如果路径不闭合，但是关闭了路径绘制，则不会出现自动闭合情况。
3. ctx.moveTo() 移动路径的起始点
   ctx.moveTo(x, y);
4. ctx.lineTo() 绘制直线路径到指定点
   ctx.lineTo(x, y);
5. ctx.bezierCurveTo() 绘制贝塞尔曲线路径到指定点
   ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
   当前点是起始点，参数是两组控制点和一个结束点。测试地址
   
6. ctx.quadraticCurveTo() 绘制二次贝塞尔曲线路径到指定点
   ctx.quadraticCurveTo(cpx, cpy, x, y);
   当前点是起始点，参数是一个控制点和一个结束点。测试地址
7. ctx.arc() 圆弧路径
   ctx.arc(x, y, r, startAngle, endAngle [, anticlockwise]);对应 圆心、半径、起始角度（弧度）、结束角度（弧度）、绘制方向（默认 false 顺时针）
8. ctx.arcTo() 圆弧路径
   不同于arc绘制一段路径。这个更像是从当前点到目标点的绘制一个带弧度的路径
   ctx.arcTo(x1, y1, x2, y2, radius);
9. ctx.rect() 矩形路径
   ctx.rect(x, y, width, height);
10. ctx.ellipse() 椭圆弧路径
    ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
    记住是绘制椭圆弧路径
11. ctx.clip() 裁剪路径。规定路径只可以在这个区域内。
    ctx.clip();、ctx.clip(fillRule);、ctx.clip(path, fillRule);
    意思是之后的操作只在该路径内操作。

变换

这里就要说一下我之前的文章了(蹭热点，请给我一面国旗@微信官方)，使用这个功能来实现css3变换之后，转换到canvas上。测试地址
变化测试地址

1. ctx.rotate() 旋转
   ctx.rotate(angle);，angle是弧度，angle = deg / 180 * Math.PI
   默认旋转中心点是Canvas的左上角(0, 0)坐标点。默认值是0。旋转是指将当前的坐标系旋转，不会影响之前的绘制。css的则是整体旋转。
2. ctx.scale() 缩放
   ctx.scale(x, y); 默认点是(0, 0)。默认值是(1, 1)。放大来讲css和canvas是一样的。不会影响之前的绘制。
3. ctx.translate() 位置
   ctx.translate(x, y); 默认点是(0, 0)。默认值是(0, 0)。使用来说和css的差距很大。不会进行坐标轴叠加。用于修改中心点操作。
4. ctx.transform() 矩阵变化叠加

5. ctx.setTransform() 矩阵变化不叠加

   1. ctx.resetTransform() 重置矩阵变化
   2. ctx.getTransform() 获取当前的矩阵变化值。

图片绘制

1. ctx.createLinearGradient() 线性渐变
   ctx.createLinearGradient(x0, y0, x1, y1);
   可以理解为点1到点2是渐变。其余位置是原色。渐变绘制坐标为canvas坐标，也就是说渐变其实已经绘制好，fill只是决定显示那块内容
2. ctx.createRadialGradient() 径向渐变
   ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
   可以理解为圆0是点1纯色，圆0到圆1之间是渐变色，圆1外是点2纯色。渐变绘制坐标为canvas坐标，也就是说渐变其实已经绘制好，fill只是决定显示那块内容
   
   测试地址

3. ctx.createPattern() 图案
   ctx.createPattern(image, repetition);

   1. imgage 可以为 HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、CanvasRenderingContext2D、ImageBitmap、ImageData、Blob。
   2. repetition 可以为 repeat 默认 平铺、repeat-x 水平平铺、repeat-y 垂直平铺、no-repeat 不重复。

4. ctx.drawImage() 绘制图片到canvas上

   1. ctx.drawImage(image, dx, dy); 图片从cavnas坐标开始绘制。
   2. ctx.drawImage(image, dx, dy, dWidth, dHeight); 图片从canvas坐标开始绘制，绘制宽高。
   3. ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 图片截取图片的坐标宽高，绘制到canvas的坐标上。
5. ctx.createImageData() 创建一个图片数据对象，四位描述一个像素点为rgba。
6. ctx.getImageData() 获取当前canvas的数据对象
7. ctx.putImageData() 将数据对象绘制到canvas上

杂项

1. ctx.clearRect() 清除指定区域内的所有内容

2. ctx.measureText() 测量文本所占据的宽度

   1. ctx.measureText(text)
3. ctx.isPointInPath() 点是否在路径内
   ctx.isPointInPath(x, y);
ctx.isPointInPath(x, y, fillRule);
ctx.isPointInPath(path, x, y);
ctx.isPointInPath(path, x, y, fillRule);
4. ctx.isPointInStroke() 点是否在路径上
   ctx.isPointInStroke(x, y);
ctx.isPointInStroke(path, x, y);
5. ctx.save() 保存绘制状态，入栈
6. ctx.restore() 恢复绘制状态，出栈
7. ctx.canvas dom对象的引用
8. ctx.drawFocusIfNeeded()
9. ctx.scrollPathIntoView()

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. Canvas API中文文档首页地图