入个门吧,Canvas绘图【趣学前端】

举报
叶一一 发表于 2023/02/20 22:41:24 2023/02/20
【摘要】 背景我之前的公司官网,首页有个汽车动画,从人物打开车门进入汽车,到里面的结构,再到汽车上路,全部的动画效果都是用Canvas实现的,一气呵成,非常壮观。不过,因为技术团队是国外的部门,所以没能讨教一二。最近睡前习惯翻会书,已读完《JavaScript权威指南》,开始阅读《HTML5 Canvas 开发详解》。可能是秋季的清爽,又或者藕粉的甜蜜,书读起来比绸缎还丝滑。所以,我准备写写Canva...

背景

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

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

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

在Canvas上绘图

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

吃豆子

https://code.juejin.cn/pen/7134712416973094953

这个是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) 的浏览器上可用。Experimental

bitmaprenderer:这将创建一个只提供将 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畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。