用canvas画一个水滴形状的渐变进度条、控制条

最新推荐文章于 2022-11-14 08:25:08 发布

原创最新推荐文章于 2022-11-14 08:25:08 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

canvas 专栏收录该内容

1 篇文章

订阅专栏

不知道该如何形容这东西，有点像水滴又不是很像，如下图

滑动条

进度条

我是通过canvas 画出来的，如果你有更好的方法，欢迎交流。
代码如下：

<!DOCTYPE html>
<html lang="ch">
<head>
    <title>hahaha </title>
    <style>
        .back{
            background-image: linear-gradient(to right, #50d991 , #92e059);
            width: 500px ;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div1{
            width: 400px;
            height: 16px;
            border-radius: 8px;
            background-color: #9be8bb;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="back">
        <div style="height: 50px;">
        </div>
        <div class="div1">
            <canvas id="myCanvas" width="160" height="20">
                您的浏览器不支持 HTML5 canvas 标签。
            </canvas>
        </div>
    </div>

    <script>
        var c=document.getElementById("myCanvas");

        var myCanvas_rect = c.getBoundingClientRect();
        var width = parseInt(myCanvas_rect.width);
        var height = parseInt(myCanvas_rect.height);

        var ctx=c.getContext("2d");
       
        // 开始画圆 arc(x,y,r,start,stop)
        ctx.arc(width-0.5*height,0.5*height,0.45*height,0.5*Math.PI, 1.5*Math.PI,true);
        // 0.5*Math.PI 到 1.5*Math.PI 就是画 圆的右半边
        ctx.arc(0.5*height,0.5*height,0.05*height,1.5*Math.PI, 2.5*Math.PI,true);
		// 1.5*Math.PI 到 2.5*Math.PI 就是画 圆的左半边
		// 画完两个半圆他会自动连上？
        //设置渐变
        var grd=ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"#9be8bb");
        grd.addColorStop(1,"#fff");

        // Fill with gradient
        ctx.fillStyle=grd;
        ctx.fill();
    </script>
</body>

</html>