利用 Canvas 绘画一个未闭合的带进度条的圆环

mgckid 发布于2019-08-26 10:20 / 1079人阅读

摘要：最终效果图一定义变量定义半径，定义圆环厚度，定义圆心位置定义默认填充颜色二画第一个圆弧注意这个方法，生成路径的第一步。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径线弧形等等构成图形。

最终效果图

一、定义变量

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

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)

注意 beginPath() 这个方法，生成路径的第一步。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
也就是说，这个方法可以用来给 Canvas图像分组，绘制新的图形如果不调用此方法，那么新的图形会和前面的图形连接在一起

三、画第一个连接处

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

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

四、画第二个圆弧

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

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

五、画第二个连接处

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

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

六、填充

 ctx.fill();

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

画第二个进度条圆环 七、初始化

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

transform: rotate(-135deg);

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

完整代码

超融合服务器专线服务圆环进度条 swift圆环进度提示稳定的带硬防服务器 java滚动条的事件

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

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

利用 Canvas 绘画一个未闭合的带进度条的圆环

摘要：最终效果图一定义变量定义半径，定义圆环厚度，定义圆心位置定义默认填充颜色二画第一个圆弧注意这个方法，生成路径的第一步。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径线弧形等等构成图形。最终效果图 showImg(https://segmentfault.com/img/bVbvvTW); 一、定义变量定义半径，定义圆环厚度，定义圆心位置、定义默认填充颜色 ...

LinkedME2016 2019-08-05 17:42 评论0 收藏0
利用 Canvas 绘画一个未闭合的带进度条的圆环

摘要：最终效果图一定义变量定义半径，定义圆环厚度，定义圆心位置定义默认填充颜色二画第一个圆弧注意这个方法，生成路径的第一步。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径线弧形等等构成图形。最终效果图 showImg(https://segmentfault.com/img/bVbvvTW); 一、定义变量定义半径，定义圆环厚度，定义圆心位置、定义默认填充颜色 ...

JeOam 2019-08-30 15:44 评论0 收藏0
实现环形进度条的几种方法

摘要：环形进度条的问题，网上有很多的，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看和的东西了，基础的拿来熟悉下。环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。 DIV + CSS3 这个是最...

Flands 2019-08-05 17:52 评论0 收藏0
实现环形进度条的几种方法

摘要：环形进度条的问题，网上有很多的，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看和的东西了，基础的拿来熟悉下。环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。 DIV + CSS3 这个是最...

Scliang 2019-08-30 15:52 评论0 收藏0
微信小程序之圆形进度条（自定义组件）

摘要：前言昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。注意在组件中不应使用选择器属性选择器和标签名选择器。节点名即自定义组件的标签名节点属性即传递给组件的属性值，当自定义组件触发事件时，调用方法。前言昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。根据官方文档自定义组件一步一步来创建自定义组件第一...

AlanKeene 2019-08-05 13:00 评论0 收藏0