canvas画圆环(二)之多色间隔

最新推荐文章于 2024-08-15 07:19:20 发布

qq_38041780

最新推荐文章于 2024-08-15 07:19:20 发布

阅读量1.6k

点赞数

分类专栏：代码段文章标签： canvas 自定义颜色圆环进度条

本文链接：https://blog.youkuaiyun.com/qq_38041780/article/details/84729992

版权

这篇博客介绍如何使用canvas绘制可自定义颜色段的圆环，作为进度条使用。文章提供了简单的封装函数，方便直接应用或进行个性化修改。html结构中，需设置外层item-canvas的宽高，内层canvas与其保持一致。在javascript部分，定义了相关变量并进行了函数封装，允许外部定义每个颜色段的颜色。最终展示了实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过canvas画可自定义颜色段的圆环，可当进度条使用，本文章做了简单的封装可直接使用，也可自定义更改。

html结构

<div class="item-canvas">
          <canvas id="procanvas1" class="procanvas"></canvas>
</di>

同上篇，需要设置外层的item-canvas的宽高，内层canvas会设置成和外层一样。

javascript

定义函数

基本变量的含义可看上一篇文章。

function process() {
        var ring = arguments[0];
        var canvas = document.getElementById(ring.canvasId);
        var context = canvas.getContext("2d");
        var center = [ring.canvasW / 2, ring.canvasH / 2];
        var borderWidth = ring.bdWidth;
        var r = ring.canvasW / 2 - borderWidth / 2;
        canvas.width = ring.canvasW;
        canvas.height = ring.canvasH;
        //开始画一个灰色的圆
        context.save();
        context.beginPath();
        context.lineWi