网页制作

利用 Canvas实现绘画一个未闭合的带进度条的圆环
网页制作 2024/11/15 佚名
3 2
最终效果图

利用 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>

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

标签：
Canvas,进度条圆环
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com