canvas 用法小总结

Bela
387 阅读6分钟

前不久使用 canvas 做了一个简易画板，今天总结一下 canvas 的用法。

标签用于定义图形，但是这个标签本身只是提供了一个用于绘制图形的容器，要绘制图像必须使用脚本来绘制。

起手式

let myCanvas = document.getElementById("myCanvas")
let ctx = myCanvas.getContext("2d")
ctx.fillStyle="red"
ctx.fillRect(0,0,100,100)

canvas 起初是空白的，绘制图形之前必须要先获取 canvas 容器，找到其渲染上下文，然后使用 getContext() 方法定义上下文格式，该方法只接收一个参数，可以取值为 "2d" 、 "3d" ······

常用 api 及其属性

先罗列一下常用的 api 及其简要用法。

  • fillStyle：设置填充颜色，其值可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象，默认为黑色。

  • strokeStyle：设置图形的轮廓颜色。

  • globalAlpha：设置图形的透明度，作用于所有图像上，值在 0~1 之间，默认为1.

  • lineWidth：设置线条的宽度。

  • lineCap：设置线条末端的样式。其值可以是 butt（线条末端以方形结束）、round（线条末端以圆形结束）、square（线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。）

  • lineJoin：设置线条与线条间接合处的样式，其值可以是 ① round：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度。② bevel：在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。③ miter：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

  • setLineDash：设置当前虚线的样式。接受一个Array数组参数，用于描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

  • lineDashOffset：设置虚线的偏移量，可以利用该属性绘制“蚂蚁线”。

  • createLinearGradient(x0,y0,x1,y1)：该方法创建一个沿参数坐标指定的直线的渐变，该方法会返回一个线性 CanvasGradient 对象。x0、y0表示初始坐标，x1、y1表示终点坐标。

  • createRadialGradient：该方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

  • createPattern：使用指定的图像创建模式的方法，接受两个参数，第一个参数定义图像的路径，第二个参数定义在指定的方向上重复元图像，可以设置为 repeat 、 repeat-x 、 repeat-y等，此方法返回一个CanvasPattern对象。

  • shadowColor：设置阴影的颜色。

  • shadowOffsetX：设置阴影水平偏移距离。

  • shadowOffsetY：设置阴影垂直偏移距离。

  • shadowBlur：设置阴影的模糊程度。

  • fillRect：绘制一个填充的矩形；strokeRect：绘制一个矩形边框；clearRect：清除指定的矩形区域。

  • beginPath：新建一个路径，生成之后，图形绘制命令被指向到路径上生成路径；closePath：闭合路径之后图形绘制命令又重新指向到上下文中；fill：通过填充路径的内容区域生成实心的图形。stroke：通过线条来绘制图形轮廓。

  • moveTo：接受两个参数 x y，作用是移动笔触到指定的坐标（x，y）位置上；lineTo：接受两个参数 x 和 y，绘制一条从当前位置到指定位置的线段。

  • arc：接受的参数：(x, y, radius, startAngle, endAngle, anticlockwise)，作用是画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。另外，还有 arcTo 绘制一段圆弧，quadraticCurveTo绘制二次贝塞尔曲线，bezierCurveTo绘制三次贝塞尔曲线。

  • fillText：填充文本，接收四个参数，分别是 text、x、y、[maxWidth]，在 (x, y)位置填充文本，如果第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度；strokeText：在指定的位置绘制文本边框。除此之外，可通过 font、textAlign、textBaseline、direction等属性来绘制有样式的文本。

  • drawImage：将指定的图像绘制到画布上。

  • save：保存画布的所有状态；restore：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数，Canvas 的状态就是当前画面应用的所有样式和变形的一个快照；translate：接受两个参数，分别为 x 和 y ，x 是左右偏移量，y 是上下偏移量。rotate：只接受一个参数：旋转的角度，是顺时针方向的，以弧度为单位的值；scale：可以缩放画布的水平和垂直的单位，接受两个参数，都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形， 如果比1大会放大图形。默认值为1， 为实际大小；transform：将当前的变形矩阵乘上一个基于自身参数的矩阵进行相应变形。

  • globalCompositeOperation：属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。

  • clip：将当前正在构建的路径转换为当前的裁剪路径。

关于更多动画内容，详见 mdn 文档

绘制三角形

//填充三角形
let canvas = document.getElementById('myCanvas');
let ctx =canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

//描边三角形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();

绘制矩形

let canvas = document.getElementById('myCanvas');
let ctx =canvas.getContext('2d');
ctx.fillRect(0,0,100,100);//描边矩形的话需要使用 ctx.strokeRect(0,0,10,100);

矩形的绘制十分容易，但要要尤其记住 clearRect 这个方法，该方法可以用来清楚矩形区域，在制作动画的时候特别有用。我的简易画板项目上的橡皮擦就主要采用的该方法。

绘制圆及其圆弧

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);  //绘制一个(100,100)为圆心半径为50的完整的圆
ctx.fill(); //fill()表示绘制填充圆形，ctx.stroke()表示绘制一个描边圆形。

绘制一个爱心

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();

最后附上一个简易画板的源码链接，欢迎大家评论：canvas 简易画板

avatar
文章
阅读
粉丝