前端培训-中级阶段(26）-Canvas绘图

canvas 实战

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

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

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

1. tranform、canvas、drawImage、toDataURL

canvas 标签

<canvas id="canvas" width="300" height="300"></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:[<mime type>][;base64],<data> 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()