使用canvas绘制圆弧动画

Kyxy 发布于2019-08-23 14:41 / 2792人阅读

摘要：即，把放大为倍时，显示效果会被拉伸当不设置样式宽高时，浏览器中大小由画布大小决定在实际开发中，碰到一个例外，是在使用时，绘制的标签如果只设置画布大小时，在移动端的浏览器上显示异常，正常。回到圆弧动画，当前动画有两段，以顺时针方向这段为例。

效果预览

canvas 绘制基本流程

初始画布

对于canvas的绘制，首先需要在html内指定一块画布，即, 可以看做是在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倍时，显示效果会被拉伸：

当不设置样式宽高时，浏览器中canvas大小由画布大小决定(在实际开发中，碰到一个例外，是在使用mapbox时，绘制map的标签如果只设置canvas画布大小时，在ios移动端的浏览器上显示异常，PC正常)。

获取上下文

所谓上下文，代表的就是一个环境，在这个环境当中你可以获取到相关的方法，变量。程序中有上下文，html的媒体中也有上下文，比如音频上下文（AudioContext）,只有拿到了上下文，才能进行相关的方法操作，canvas也是如此，canvas上的方法都是借由canvas上下文得到。


const canvasL = document.getElementById("leftCanvas");
const cxtL = canvasL.getContext("2d");

配置线条

本次圆弧动画需要用到的上下文属性有：

lineCap 线段端点形状，本次设置为round

lineWidth 线宽

strokeStyle 线条填充颜色

clearRect 清除画布里面的内容

beginPath 在画布上开始一段新的路径

arc 圆弧绘制参数配置

stroke 绘制

角度计算

角度计算之前，先介绍一下绘制圆弧的基础api arc。

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

这个函数可以接收6个参数，前五个为必填，分别为圆心x坐标，圆心y坐标，半径，起始角度，结束角度，方向（默认为false,顺时针）。

回到圆弧动画，当前动画有两段，以顺时针方向这段为例。

x, y:在canvas当中，坐标系默认以左上角为原点，如果想让圆弧动画以画布中心点旋转，可以将圆心点设置为画布中心点，即画布长宽的1/2,假设设置的画布长宽均为100，那么圆心点的坐标即为(50, 50)，这个圆就绘制在了画布中间。

radius:为了不与画布产生切角，半径设置比画布一般略小，。

startAngle:起始角度为正北方向，而圆以x轴水平方向为0度，因此将起始点逆时针旋转90°，即：-1 / 2 * Math.PI。

endAngle:因为圆弧长度为30°，终点角度在起始角度的基础上增加 1 / 6 * Math.PI。

顺时针方向圆弧初始配置为：

 cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);

开启动画

window.requestAnimationFrame()

借助requestAnimationFrame，来对canvas圆弧进行不断的重绘，每次重绘canvas之前清空画布，每轮动画方向角偏移2°，即2 / 180 * Math.PI，动画结束的标记为圆弧终点的角度，移动至3 / 2 * Math.PI，当满足条件时，调用window.cancelAnimationFrame(animationId)取消动画。

屏幕适配

通过进入html后，动态获取视口，来设置canvas宽高，比如希望画布大小为窗口的宽度的15%，可以通过

const clientWidth = document.documentElement.clientWidth;
const canvasWidth = Math.floor(clientWidth * 0.15);
const canvasL = document.getElementById("leftCanvas");
canvasL.setAttribute("width", canvasWidth + "px");

这样就可以使画布适应不同屏幕大小。

以下为未整理代码，较乱，仅供参考。

https://codepen.io/jbleach/pe...

GPU云服务器云服务器圆弧动画使用canvas画图渐变圆弧圆弧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100976.html

circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

boredream 2019-08-29 11:18 评论0 收藏0
circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

宠来也 2019-08-01 15:42 评论0 收藏0
circle_clock 简单canvas实现圆弧时钟

摘要：渣渣成品图最近对于圆形有种特别的感情呢因为写了个就像到了用来做时钟大概会比较有趣吧所以就着手写了个这样的一个东西大概代码上错漏还是蛮多的接下来分享下关于如何开发一个圆形时钟条吧使用这次就没有采用的方法来实现圆环了因为我想要做多层嵌套的圆环觉渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_proce...

paney129 2019-08-22 10:38 评论0 收藏0
学习HTML5 Canvas这一篇文章就够了

摘要：本文作者利用一些简单的对进行了系统的总结，受益匪浅，毫不夸张的说，学习这一篇文章就够了一简介是新增的，一个可以使用脚本通常为在其中绘制图像的元素。本文作者利用一些简单的 demo 对 Canvas 进行了系统的总结，受益匪浅，毫不夸张的说，学习 Canvas 这一篇文章就够了！一、canvas简介是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘...

Eidesen 2019-08-26 12:12 评论0 收藏0