linong
  • 11.3k

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

 阅读约 19 分钟

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

canvasHTML5 新增加的功能,用于操作绘制图片。
可以用于动画游戏画面数据可视化图片编辑以及实时视频处理等方面。
主要操作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 为填充规则 nonzeroevenodd搞懂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 可以为 HTMLImageElementHTMLVideoElementHTMLCanvasElementCanvasRenderingContext2DImageBitmapImageDataBlob
    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中文文档首页地图
阅读 969更新于 2019-12-13

推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

772 人关注
68 篇文章
专栏主页
目录