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 . get context( 2d )；CTX . fill style= # f2d7d 7 ；二、画第一个圆弧
CTX . begin path()；ctx.arc(x，y，半径，数学。圆周率* 1.5，数学。PI)
注意方法beginPath()，生成路径的第一步。本质上，路径是由许多子路径组成的，所有的子路径都在一个列表中，所有的子路径(直线、圆弧等。)形成一个图形。而且每次这个方法被调用的时候，列表都会被清除和重置，然后我们就可以重新绘制新的图形了。
也就是说，这种方法可以用来对画布图像进行分组，并绘制新的图形。如果不调用此方法，新图形将与以前的图形连接。
三、画第一个连接处
ctx.quadraticCurveTo((x -内径)-厚度/2，y -厚度，x -内径，y)
外部用二次贝塞尔曲线绘制，Canvas的quadraticCurveTo(cp1x，cp1y，x，y)方法接受四个参数，第一个和第二个参数是控制点，第三个和第四个参数是端点的正式文档。
只要算出控制点和终点，就可以画出圆弧了。
四、画第二个圆弧
ctx.arc(x，y，内径，数学。圆周率，数学。PI * 1.5，真)
请注意，该方法后面的最后一个参数设置为true，这意味着逆时针绘制(默认为顺时针)。
五、画第二个连接处
ctx.quadraticCurveTo(y -厚度，(x -内径)-厚度/2，x，y -内径-厚度)
其实这一步和第三步差不多，简单的改变一下参数的位置。
六、填充
CTX . fill()；
至此，一个简单的未闭合圆就完成了。
画第二个进度条圆。
七、初始化
CTX . begin path()；CTX . fill style= # e87c 7c ；BeginPath的意思是画一张新的图。如果不调用此方法，后一个图形将与前一个图形连接。
八、绘制第二个进度条圆环
CTX . begin path()；CTX . fill style= # e87c 7c ；ctx.arc(x，y，半径，数学。圆周率* 1.5，数学。PI * 2)ctx.quadraticCurveTo((x内径)厚度/2，y厚度，x内径，y)ctx.arc(x，y，内径，数学。PI * 2，数学。PI * 1.5，true)ctx.quadraticCurveTo(y -厚度，(x -内径)-厚度/2，x，y -内径-厚度)CTX . fill()；
因为和第一个圆的画法一样，就不重复了。区别只是圆的弧度。
九、旋转 Canvas
变换：旋转(-135度)；
因为css的旋转比较方便，省略了角度计算，所以我用css的transform来旋转。当然，Canvas也提供了一种旋转的方法。
完全码
！DOCTYPE html lang= cn head meta charset= UTF 8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title canvas/title style .戒指{宽度：150像素高度：150像素显示器：flex对齐-项目：居中；对齐-内容：居中；伸缩方向：列；位置：相对；} #教程{变换：旋转(-135度)；宽度：150像素高度：150px}。分数{位置：绝对；字体大小：30px字体粗细：粗体；颜色：红色；} .small { font-size:12px；字体-粗细：较轻；} .标题{颜色：红色；底部：0;位置：绝对；}/style/head bdy div class= ring canvas id= tutorial width= 150 height= 150 /canvas span class= fraction 100 span class= small 分/span/span class=" title "服务分/span /div脚本让半径=75让厚度=10让内半径=半径-厚度让x=75让y=75 var canvas=document。getelementbyid( tutorial )；var CTX=画布。获取上下文(“2d”)；CTX。填充样式= # f2d7d 7CTX。begin path()；ctx.arc(x，y，半径，数学。圆周率* 1.5,数学. PI) ctx.quadraticCurveTo((x -内径)-厚度/2，y -厚度，x -内径y) ctx.arc(x，y，内径，数学。圆周率，数学. PI * 1.5，true) ctx.quadraticCurveTo(y -厚度，(x -内径)-厚度/2，x，y -内径-厚度)CTX。fill()；CTX。begin path()；CTX。填充样式= # e87c 7cctx.arc(x，y，半径，数学。圆周率* 1.5,数学. PI * 2) ctx.quadraticCurveTo((x内径)厚度/2，y厚度，x内径y) ctx.arc(x，y，内径，数学* 2，数学. PI * 1.5，true) ctx.quadraticCurveTo(y -厚度，(x -内径)-厚度/2，x，y -内径-厚度)CTX。fill()；/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。