使用canvas绘制圆弧动画

最新推荐文章于 2025-06-15 13:38:14 发布

原创

最新推荐文章于 2025-06-15 13:38:14 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

本文介绍了如何使用canvas绘制圆弧动画，从初始画布、获取上下文、配置线条、角度计算到开启动画和屏幕适配的步骤。通过设置lineCap、lineWidth和strokeStyle等属性，并利用arc()函数绘制圆弧，结合requestAnimationFrame实现动态效果。同时，讨论了canvas.width和canvas.height与样式宽高的关系，以及如何实现canvas在不同屏幕尺寸下的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览

在这里插入图片描述

canvas 绘制基本流程

在这里插入图片描述

初始画布

对于canvas的绘制，首先需要在html内指定一块画布，即<canvas></canvas>, 可以看做是在PS中新建一个空白文档，之后所有的操作都将呈现在这个文档之上，与PS的区别是，canvas本身没有图层的特性，当需要展示不同维度的视图时，需要交由html的位置关系来解决。

canvas标签上，值得一提的就是width和height两个属性，这两个属性代表着画布的宽高，与canvas样式上的宽高有很大区别。在浏览器当中，看到的图形绘制大小，本身是由canvas.style.width/canvas.style.height决定的，他们决定了canvas这个dom元素的大小关系，而canvas.width和canvas.height决定的是canvas内部图形的大小关系。当这两个宽高比不同时，就会产生视觉上的形变。即，把canvas.style.height放大为2倍时，显示效果会被拉伸：
在这里插入图片描述