使用Canvas怎么绘制一个未闭合的带进度条圆环-创新互联

这期内容当中小编将会给大家带来有关使用Canvas怎么绘制一个未闭合的带进度条圆环,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联公司专业提供做网站、网站设计,网页设计,网站制作(企业站、响应式网站、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

一、定义变量

定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色

let radius = 75
let thickness= 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";

二、画第一个圆弧

ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)

使用Canvas怎么绘制一个未闭合的带进度条圆环

注意 beginPath() 这个方法,生成路径的第一步。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。

也就是说,这个方法可以用来给 Canvas图像 分组,绘制新的图形如果不调用此方法,那么新的图形会和前面的图形连接在一起

三、画第一个连接处

ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)

使用Canvas怎么绘制一个未闭合的带进度条圆环

连接外是用二次贝塞尔曲线来画的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4个参数,第一、二个参数为控制点,第三、四个参数为结束点官方文档
只需算出控制点和结束点,就可以画出一个圆弧

四、画第二个圆弧

ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)

使用Canvas怎么绘制一个未闭合的带进度条圆环

注意方法后面最后一个参数,设置为true,代表逆时针绘制(默认是顺时针)

五、画第二个连接处

ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

使用Canvas怎么绘制一个未闭合的带进度条圆环

这一步其实和第三步相差不大,简单的调换了下参数位置

六、填充

 ctx.fill();

使用Canvas怎么绘制一个未闭合的带进度条圆环

至此,一个简单的未闭合的圆环就完成了

画第二个进度条圆环

七、初始化

ctx.beginPath();
ctx.fillStyle = "#e87c7c";

beginPath 表示绘制新的图形,如果不调用此方法,那后面画的图形会和前面画的图形连在一起

八、绘制第二个进度条圆环

ctx.beginPath();
ctx.fillStyle = "#e87c7c";
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

ctx.fill();

使用Canvas怎么绘制一个未闭合的带进度条圆环

由于和第一个圆环绘制方式一模一样,就不在重复了,区别仅仅是圆的弧度

九、旋转 Canvas

transform: rotate(-135deg);

使用Canvas怎么绘制一个未闭合的带进度条圆环

由于css的旋转比较方便,也省去了角度的计算,所以本人使用的是css的transform来旋转的。当然 Canvas 也提供了旋转的方法

完整代码




    
    
    
    canvas
    



    
        
        100 分 
        服务分
    
    

上述就是小编为大家分享的使用Canvas怎么绘制一个未闭合的带进度条圆环了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


当前文章:使用Canvas怎么绘制一个未闭合的带进度条圆环-创新互联
标题URL:http://pwwzsj.com/article/djiihe.html

其他资讯