全国服务热线:4008-888-888

技术知识

运用 Canvas完成美术绘画1个未闭合的带进度条的圆

最后实际效果图

1、界定自变量

界定半径,界定圆环厚度,界定圆心部位、界定默认设置填充色调

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";

2、画第1个圆弧

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

留意 beginPath() 这个方式,转化成相对路径的第1步。实质上,相对路径是由许多子相对路径组成,这些子相对路径全是在1个目录中,全部的子相对路径(线、弧形、这些)组成图型。而每次这个方式启用以后,目录清空重设,随后大家便可以再次绘图新的图型。
 

也便是说,这个方式能够用来给 Canvas图象 排序,绘图新的图型假如不启用此方式,那末新的图型会和前面的图型联接在1起

3、画第1个联接处

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

联接外是用2次贝塞尔曲线图来画的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方式接纳4个主要参数,第1、2个主要参数为操纵点,第3、4个主要参数为完毕点官方文本文档
只需算出操纵点和完毕点,便可以画出1个圆弧

4、画第2个圆弧

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

留意方式后边最终1个主要参数,设定为true,意味着逆时针绘图(默认设置是顺时针)

5、画第2个联接处

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

这1步实际上和第3步相差不大,简易的替换了下主要参数部位

6、填充

 ctx.fill();

至此,1个简易的未闭合的圆环就进行了

画第2个进度条圆环

7、原始化

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

beginPath 表明绘图新的图型,假如不启用此方式,那后边画的图型会和前面画的图型连在1起

8、绘图第2个进度条圆环

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();

因为和第1个圆环绘图方法1模1样,就不在反复了,差别仅仅是圆的弧度

9、转动 Canvas

transform: rotate(⑴35deg);

因为css的转动较为便捷,也省去了角度的测算,因此自己应用的是css的transform来转动的。自然 Canvas 也出示了转动的方式

详细编码

 

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF⑻">
    <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(⑴35deg);
            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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服