欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-29 18:51:07
这篇文章主要介绍了利用 Canvas实现绘画一个未闭合的带进度条的圆环,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 19-07-26...
最终效果图

利用 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 也提供了旋转的方法

完整代码

 

<!doctype html>
<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>
        .ring {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        #tutorial {
            transform: rotate(-135deg);
            width: 150px; 
            height: 150px;
        }

        .fraction {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: red;
        }

        .small {
            font-size: 12px;
            font-weight: lighter;
        }

        .title {
            color: red;
            bottom: 0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="ring">
        <canvas id="tutorial" width="150" height="150"></canvas>
        <span class="fraction">100 <span class="small">分</span> </span>
        <span class="title">服务分</span>
    </div>

    <script>
        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)
        ctx.quadraticcurveto((x - innerradius) - thickness/2 , y - thickness, x - innerradius, y)
        ctx.arc(x, y, innerradius, math.pi, math.pi * 1.5, true)
        ctx.quadraticcurveto(y - thickness, (x - innerradius) - thickness / 2, x, y - innerradius - thickness)
        ctx.fill();

        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();
    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。