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

头像
linong
    阅读 6 分钟
    10

    前端最基础的就是 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 标签

    <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 对象。

    image.png

    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);
      当前点是起始点，参数是两组控制点和一个结束点。测试地址
      image.png
    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只是决定显示那块内容
      image.png
      测试地址

    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

    clipboard.png

    参考文献

    1. 前端培训目录、前端培训规划、前端培训计划
    2. Canvas API中文文档首页地图
    canvashtml5javascript前端html
    linong
    29.2k 声望9.5k 粉丝

    Read-Search-Ask

    « 上一篇
    前端培训-中级阶段（25）- Web Socket 网络编程（2019-11-14期）
    下一篇 »
    前端培训-中级阶段（27）- http 2.0（2019-11-28期）

    引用和评论

    推荐阅读
    头像
    为 SPA 应用实现一个升级提示组件（UpgradeNotification）

    linong赞 1阅读 314

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.2k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.7k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.3k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新