李侬

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


思否
前端培训 动画与交互 HTML5

转载自 SegmentFault

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

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

canvas 实战

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

globalCompositeOperation、drawImage、节点记录自动化

  • ctx.globalCompositeOperation = 'destination-out'

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

tranform、canvas、drawImage、toDataURL

canvas 标签

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

  • 操作需要使用DOM，所以一般给一个ID来方便查找

height 为画布真实高度。单位：px。默认高度 150px。

width 为画布真实宽度。单位：px。默认宽度 300px。

  • 标签上的属性为画布宽高，css设置宽高为展示宽高。意义是不同的。

  • HTMLCanvasElement 为 canvas 标签的 DOM 对象。

canvas 属性

height 对应标签上的 height 属性

width 对应标签上的 width 属性

canvas 方法

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

getContext() 返回绘制上下文环境对象。我们需要使用返回的对象操作图形。

toBlob() 将图片输出为Blob类型、异步

toDataURL() 将图片输出为DataURL类型、同步

canvas.getContext(contextType[, contextAttributes])

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

contextType 需要返回的对象类型

'2d' 返回 CanvasRenderingContext2D对象，用来进行2D绘制。

'webgl'或'experimental-webgl' 返回WebGLRenderingContext（WebGL渲染上下文）对象，用于使用 webgl 进行 3D绘制。提供硬件3D加速渲染。对应的WebGL1（OpenGL ES 2.0）

'webgl2' 返回 WebGL2RenderingContext 对象，也是用于3D绘制。只不过对应 WebGL2（OpenGL ES 3.0）

'bitmaprenderer' 返回 ImageBitmapRenderingContext

contextAttributes 可选

alpha 开启透明

canvas.toBlob(callback, mimeType, quality);

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

callback 处理完成的回调函数。回调的第一个参数为blob。

mimeType 需要转换的图片类型，默认为image/png。

quality 图片质量，默认为0.92。

canvas.toDataURL(mimeType, quality);

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

mimeType 需要转换的图片类型，默认为image/png。

quality 图片质量，默认为0.92。

跨域问题

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

设置图片的crossOrigin

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

CanvasRenderingContext2D

线条样式

测试地址

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

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

butt 默认值，严格按照坐标点绘制。

  • round 圆形，端点处lineWidth为直径画圆。

  • square 方形，线的端点多出一个方块，lineWidth 是一样，长度度是 lineWidth/2。

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

miter 尖角，默认值。如果夹角比较小，则尖头会非常长。miterLimit可以限制尖头最长尺寸，长度大于限制值的会使用bevel来处理。

  • round 圆角，转折点处lineWidth为直径画圆。

  • bevel 平角，转折点直接截断。

ctx.miterLimit 尖角限制阈值，针对线条粗角度小的情况。默认值：10。如果ctx.lineJoin=miter时，长度超出则使用平角显示，如果长度不超出使用尖角显示。

ctx.lineDashOffset 虚线起始偏移量

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

[5]等价于[5,5]。

[5,5]等价于实线5px虚线5px

[1,2,3]等价于[实线1px,虚线2px,实线3px]

[1,2,3,4]等价于[实线1px,虚线2px,实线3px,虚线4px]

  • 以此类推

ctx.getLineDash() 获取虚线数值，数组。

文本样式

font 字号、字体。

ctx.font='20px monospace'

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

start 表示指定的坐标为开始坐标（左边、direction 时会自动变化）。

end 表示指定的坐标为结束坐标（右边、direction 时会自动变化）。

left 表示指定的坐标为左边坐标。

right 表示指定的坐标为右边坐标。

center 表示指定的坐标为中心点。

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

top 表示指定的坐标为文本顶点坐标。

  • hanging 藏文和其他印度文字中使用

  • middle 表示指定的坐标为文本垂直中心坐标。

  • alphabetic 表示指定的坐标为文本基线坐标。

  • ideographic 表示指定的坐标为文本底部坐标。

  • bottom 表示指定的坐标为文本底部坐标。

direction 控制文本方向 chrome中此特性默认是无效的。 通过 ExperimentalCanvasFeatures 特征标识进行启用。

填充绘制

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

ctx.fillRect() 填充指定区域

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

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

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

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

ctx.fill()、ctx.fill(fillRule)、ctx.fill(path, fillRule)

fillRule 为填充规则 nonzero、evenodd。搞懂SVG/Canvas中nonzero和evenodd填充规则 张鑫旭

描边绘制

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

ctx.strokeRect() 描边指定区域

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

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

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

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

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

阴影

ctx.shadowBlur 阴影模糊大小，默认值：0

ctx.shadowColor 阴影颜色，默认值：透明

ctx.shadowOffsetX 阴影X轴偏移量，默认值：0

ctx.shadowOffsetY 阴影Y轴偏移量，默认值：0

路径

ctx.beginPath() 开启一个新路径

ctx.closePath() 关闭路径绘制，区别在于描边时。 如果路径没有闭合，不关闭路径绘制会出现自动闭合的情况。 如果路径不闭合，但是关闭了路径绘制，则不会出现自动闭合情况。

ctx.moveTo() 移动路径的起始点 ctx.moveTo(x, y);

ctx.lineTo() 绘制直线路径到指定点 ctx.lineTo(x, y);

ctx.bezierCurveTo() 绘制贝塞尔曲线路径到指定点 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 当前点是起始点，参数是两组控制点和一个结束点。测试地址

ctx.quadraticCurveTo() 绘制二次贝塞尔曲线路径到指定点 ctx.quadraticCurveTo(cpx, cpy, x, y); 当前点是起始点，参数是一个控制点和一个结束点。测试地址

ctx.arc() 圆弧路径 ctx.arc(x, y, r, startAngle, endAngle [, anticlockwise]);对应 圆心、半径、起始角度（弧度）、结束角度（弧度）、绘制方向（默认 false 顺时针）

ctx.arcTo() 圆弧路径 不同于arc绘制一段路径。这个更像是从当前点到目标点的绘制一个带弧度的路径 ctx.arcTo(x1, y1, x2, y2, radius);

ctx.rect() 矩形路径 ctx.rect(x, y, width, height);

ctx.ellipse() 椭圆弧路径 ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); 记住是绘制椭圆弧路径

ctx.clip() 裁剪路径。规定路径只可以在这个区域内。 ctx.clip();、ctx.clip(fillRule);、ctx.clip(path, fillRule); 意思是之后的操作只在该路径内操作。

变换

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

ctx.rotate() 旋转 ctx.rotate(angle);，angle是弧度，angle = deg / 180 * Math.PI 默认旋转中心点是Canvas的左上角(0, 0)坐标点。默认值是0。旋转是指将当前的坐标系旋转，不会影响之前的绘制。css的则是整体旋转。

ctx.scale() 缩放 ctx.scale(x, y); 默认点是(0, 0)。默认值是(1, 1)。放大来讲css和canvas是一样的。不会影响之前的绘制。

ctx.translate() 位置 ctx.translate(x, y); 默认点是(0, 0)。默认值是(0, 0)。使用来说和css的差距很大。不会进行坐标轴叠加。用于修改中心点操作。

ctx.transform() 矩阵变化叠加

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

ctx.resetTransform() 重置矩阵变化

ctx.getTransform() 获取当前的矩阵变化值。

图片绘制

ctx.createLinearGradient() 线性渐变 ctx.createLinearGradient(x0, y0, x1, y1); 可以理解为点1到点2是渐变。其余位置是原色。渐变绘制坐标为canvas坐标，也就是说渐变其实已经绘制好，fill只是决定显示那块内容

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

测试地址

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

imgage 可以为 HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、CanvasRenderingContext2D、ImageBitmap、ImageData、Blob。

  • repetition 可以为 repeat 默认 平铺、repeat-x 水平平铺、repeat-y 垂直平铺、no-repeat 不重复。

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

ctx.drawImage(image, dx, dy); 图片从cavnas坐标开始绘制。

ctx.drawImage(image, dx, dy, dWidth, dHeight); 图片从canvas坐标开始绘制，绘制宽高。

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 图片截取图片的坐标宽高，绘制到canvas的坐标上。

ctx.createImageData() 创建一个图片数据对象，四位描述一个像素点为rgba。

ctx.getImageData() 获取当前canvas的数据对象

ctx.putImageData() 将数据对象绘制到canvas上

杂项

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

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

ctx.measureText(text)

ctx.isPointInPath() 点是否在路径内 ctx.isPointInPath(x, y); ctx.isPointInPath(x, y, fillRule); ctx.isPointInPath(path, x, y); ctx.isPointInPath(path, x, y, fillRule);

ctx.isPointInStroke() 点是否在路径上 ctx.isPointInStroke(x, y); ctx.isPointInStroke(path, x, y);

ctx.save() 保存绘制状态，入栈

ctx.restore() 恢复绘制状态，出栈

ctx.canvas dom对象的引用

  • ctx.drawFocusIfNeeded()

  • ctx.scrollPathIntoView()

微信公众号：前端linong

参考文献

  • 前端培训目录、前端培训规划、前端培训计划

  • Canvas API中文文档首页地图

原文：SegmentFault

评论

评论功能即将开放。你也可以通过 邮件 或 GitHub Issue 反馈。