「趣学前端」入个门吧,Canvas绘图

1,318 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第28天,点击查看活动详情

背景

我之前的公司官网,首页有个汽车动画,从人物打开车门进入汽车,到里面的结构,再到汽车上路,全部的动画效果都是用Canvas实现的,一气呵成,非常壮观。不过,因为技术团队是国外的部门,所以没能讨教一二。

最近睡前习惯翻会书,已读完《JavaScript权威指南》,开始阅读《HTML5 Canvas 开发详解》。可能是秋季的清爽,又或者藕粉的甜蜜,书读起来比绸缎还丝滑。

所以,我准备写写Canvas入门体验笔记。

在Canvas上绘图

我之前尝试用CSS实现各种图形效果,但是部分弧线、曲线、抛物线,用CSS不好实现。现在用Canvas去绘制图形,原来不好实现的图形,变得简单多了。

吃豆子

code.juejin.cn/pen/7134712…

这个是MDN上的一个图形。如果用CSS绘制,也能实现但是比较复杂,使用Canvas实现,90行左右代码就能实现。接下来我就用这个图形实现的过程,介绍一下Canvas的基础知识点。

划重点

知识点来咯。

getContext

Canvas被设计为可以与多个环境工作。一般绘图使用的是2D环境,所以需要得到2D环境。

方法介绍参数
该方法返回canvas 的上下文,如果上下文没有定义则返回 null。2d: 建立一个 CanvasRenderingContext2D 二维渲染上下文。webgl (或"experimental-webgl") :这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。webgl2(或 "experimental-webgl2") :这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。Experimentalbitmaprenderer:这将创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext 。

当编写出下面这行代码的时候,就获取到了 2D 画布的渲染上下文,可以使用它画想画的图形了。

var ctx = canvas.getContext('2d');

beginPath

beginPath方法通过清空子路径列表开始一个新路径。调用它可以创建一个新的路径。

绘制图形的第一步,需要确定一个新的路径。

ctx.beginPath();

moveTo

方法介绍参数
该方法可以将一个新的子路径的起始点移动到 (x,y) 坐标。x: 点的 x 轴。y: 点的 y 轴。

将路径的起始点移动到坐标(12,27):

ctx.moveTo(12, 27);

lineTo

方法介绍参数
该方法使用直线连接子路径的终点到 (x,y) 坐标(并不会真正地绘制)。x: 点的x轴。y: 点的y轴。

将路径的终点移动到坐标(12, 147),(如果这个时候完成绘制的话,画布上将呈现一条直线。)

ctx.lineTo(12, 147);

quadraticCurveTo

方法介绍参数
该方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。cpx:控制点的 x 轴坐标。cpy:控制点的 y 轴坐标。x: 终点的 x 轴坐标。y: 终点的 y 轴坐标。

控制点的坐标(12, 162),终点的坐标(27, 162),形成一个曲线路径:

ctx.quadraticCurveTo(12, 162, 27, 162);

这样,矩形的一个边的路径就绘制完成了。再重复三次,绘制不同变边的路径,矩形的路径就全部完成了。

stroke

方法介绍参数
该方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。path:绘制的路径Path2D 。

路径确定之后,使用stroke()方法绘制路径,图形会实现了。

ctx.stroke();

圆角矩形

经过一系列的路径绘制就实现了一个圆角矩形。

总结

moveTo() 和 lineTo() 方法定义的路径,并不会真正的绘制。当一个图形的所有路径完成之后,使用stroke()完成绘制。

二次贝塞尔曲线的学习可以看这篇文章☞「这一篇让你彻底搞懂贝塞尔曲线的原理」

学到这里,基本了解了如何定义图形的路径,以及完成绘制。

Canvas还有其他实用属性和方法,下篇继续学习。

今天也是特别有收获的一天。

关于作者

非职业「传道授业解惑」的程序媛叶一一,欢迎来稀土掘金关注我。

作者:叶一一

作者简介:「趣学前端」「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

文章来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。