devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

canvas绘制环形进度条及进度条_canvas环型进度条

作者：Gausst松鼠会 | 2024-03-17 05:37:12

赞

踩

canvas环型进度条

编写的一个canvas工具类，CanvasUtils。目前包含九宫格图片绘制，环形绘制，线条绘制，文本绘制，进度条绘制。使用主要关注传参就好。

效果图在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <canvas id="mycanvas1"></canvas>
    <script type="module">
        import './index.js'
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

index.js

import CanvasUtils from "./canvas.js";
import { CircleObj } from "./canvas.js";
const mycanvas = document.querySelector("#mycanvas");
const mycanvas1 = document.querySelector("#mycanvas1");

const canvasInstance = new CanvasUtils(mycanvas, 500, 100);
const canvasInstance1 = new CanvasUtils(mycanvas1, 1000, 200);

canvasInstance.drawSquaredImg(
  "./img/3.png",
  10,
  10,
  10,
  10,
  (res) => {
    console.log(res.toDataURL("image/png"));
  },
  () => {}
);
const circleObj1 = new CircleObj(
  100,
  100,
  50,
  0.65 * Math.PI,
  2.35 * Math.PI,
  5,
  "#1890FF"
);
const circleObj2 = new CircleObj(
  100,
  100,
  80,
  0.65 * Math.PI,
  2.35 * Math.PI,
  5,
  "#CCCCCC"
);
canvasInstance1.drawCircle(circleObj1);
canvasInstance1.drawCircle(circleObj2);
canvasInstance1.drawAnnularProgress(
  300,
  100,
  80,
  0.65 * Math.PI,
  2.35 * Math.PI,
  5,
  "#FFF",
  "#0FF",
  0.3,
  [
    {
      font: "16px Verdana",
      text: "总体进度",
      colors: [
        {
          offset: "0",
          color: "#FFF",
        },
        {
          offset: "1",
          color: "#0FF",
        },
      ],
      startX: 270,
      startY: 100,
      endX: 350,
      endY: 100,
    },
    {
      font: "16px Verdana",
      text: "30%",
      colors: [
        {
          offset: "0",
          color: "#FFFFFF",
        },
        {
          offset: "1",
          color: "#0FF",
        },
      ],
      startX: 290,
      startY: 120,
      endX: 330,
      endY: 120,
    },
  ]
);

canvasInstance1.drawProgress(
  500,
  80,
  680,
  80,
  10,
  "#CCC",
  [
    {
      offset: "0",
      color: "#FFF",
    },
    {
      offset: "1",
      color: "#0FF",
    },
  ],
  0.6,
  [
    {
      font: "16px Verdana",
      text: "总体进度",
      colors: [
        {
          offset: "0",
          color: "#FFF",
        },
        {
          offset: "1",
          color: "#0FF",
        },
      ],
      startX: 570,
      startY: 110,
      endX: 650,
      endY: 110,
    },
    {
      font: "16px Verdana",
      text: "60%",
      colors: [
        {
          offset: "0",
          color: "#FFFFFF",
        },
        {
          offset: "1",
          color: "#0FF",
        },
      ],
      startX: 590,
      startY: 140,
      endX: 630,
      endY: 140,
    },
  ]
);

export {};


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149

canvas.js

/**
 * @param {Number} x 圆的中心的x坐标
 * @param {Number} y 圆的中心的y坐标
 * @param {Number} radius 圆的半径。
 * @param {Number} startAngle 	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
 * @param {Number} endAngle 结束角，以弧度计。
 * @param {Number} lineWidth 粗细
 * @param {string} color 颜色
 */
export function CircleObj(
  x,
  y,
  radius,
  startAngle,
  endAngle,
  lineWidth,
  color
) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.startAngle = startAngle;
  this.endAngle = endAngle;
  this.lineWidth = lineWidth;
  this.color = color;
}

/**
 * @param {String} font
 * @param {String} text
 * @param {Number} startX
 * @param {Number} startY
 * @param {Number} endX
 * @param {Number} endY
 * @param {Array | String} colors
 */
function TextObj(
  font = "",
  text = "",
  startX = "0",
  startY = "0",
  colors = "#1890FF",
  endX = null,
  endY = null
) {
  this.font = font;
  this.text = text;
  this.startX = startX;
  this.endX = endX;
  this.startY = startY;
  this.endY = endY;
  this.colors = colors;
}

class CanvasUtils {
  /**
   * @param {HTMLCanvasElement} cDOM
   * @param {Number} cWidth
   * @param {Number} cHeight
   */
  constructor(cDOM, cWidth, cHeight) {
    cDOM.height = cHeight;
    cDOM.width = cWidth;
    this.DOM = cDOM;
    this.ctx = cDOM.getContext("2d");
  }

  // 清空画布
  clear() {
    this.ctx.clearRect(0, 0, this.DOM.width, this.DOM.height);
  }

  /**
   * 九宫格图片
   * @param {string} originUrl 图片原地址
   * @param {number} top 第一条切割线距离原图片顶部的距离
   * @param {number} bottom 第二条切割线距离原图片底部的距离
   * @param {number} left 第三条切割线距离原图片左侧的距离
   * @param {number} right 第四条切割线距离原图片右侧的距离
   * @param {Function} successCb 成功回调函数，参数为dom
   * @param {Function} errorCb 失败回调函数，参数为error对象
   */
  drawSquaredImg(
    originUrl,
    top = 0,
    bottom = 0,
    left = 0,
    right = 0,
    successCb = () => {},
    errorCb = () => {}
  ) {
    const img = new Image();
    img.src = originUrl;
    img.onload = () => {
      const w = img.naturalWidth;
      const h = img.naturalHeight;
      const cw = this.DOM.width;
      const ch = this.DOM.height;
      const ctx = this.ctx;
      // 第一块;
      ctx.drawImage(img, 0, 0, left, top, 0, 0, left, top);
      // 第二块
      ctx.drawImage(
        img,
        left,
        0,
        w - right - left,
        top,
        left,
        0,
        cw - right - left,
        top
      );
      // 第三块
      ctx.drawImage(img, w - right, 0, right, top, cw - right, 0, right, top);
      // 第四块;
      ctx.drawImage(
        img,
        0,
        top,
        left,
        h - top - bottom,
        0,
        top,
        left,
        ch - bottom - top
      );
      // 第五块
      ctx.drawImage(
        img,
        left,
        top,
        w - right - left,
        h - top - bottom,
        left,
        top,
        cw - left - right,
        ch - top - bottom
      );
      // 第六块
      ctx.drawImage(
        img,
        w - right,
        top,
        right,
        h - top - bottom,
        cw - right,
        top,
        right,
        ch - top - bottom
      );
      // 第七块
      ctx.drawImage(
        img,
        0,
        h - bottom,
        left,
        bottom,
        0,
        ch - bottom,
        left,
        bottom
      );
      // 第八块
      ctx.drawImage(
        img,
        left,
        h - bottom,
        w - right - left,
        bottom,
        left,
        ch - bottom,
        cw - left - right,
        bottom
      );
      // 第九块
      ctx.drawImage(
        img,
        w - right,
        h - bottom,
        right,
        bottom,
        cw - right,
        ch - bottom,
        right,
        bottom
      );
      successCb(this.DOM);
    };
    img.onerror = (err) => errorCb(err);
  }
  /**
   * @param {CircleObj} circleObj
   */
  drawCircle(circleObj) {
    const ctx = this.ctx;
    ctx.beginPath();
    ctx.arc(
      circleObj.x,
      circleObj.y,
      circleObj.radius,
      circleObj.startAngle,
      circleObj.endAngle
    );
    //设定曲线粗细度
    ctx.lineWidth = circleObj.lineWidth;
    //给曲线着色
    ctx.strokeStyle = circleObj.color;
    //连接处样式
    ctx.lineCap = "round";
    //给环着色
    ctx.stroke();
    ctx.closePath();
  }

  createLinearGrad(startX, startY, endX, endY, colors) {
    const gradient = this.ctx.createLinearGradient(startX, startY, endX, endY);
    colors.forEach((grd) => {
      gradient.addColorStop(grd.offset, grd.color);
    });
    return gradient;
  }

  /**
   * @param {TextObj} textObj
   */
  drawText(textObj) {
    const ctx = this.ctx;
    ctx.font = textObj.font;
    if (typeof textObj.colors === "object") {
      ctx.fillStyle = this.createLinearGrad(
        textObj.startX,
        textObj.startY,
        textObj.endX,
        textObj.endY,
        textObj.colors
      );
      ctx.fillText(textObj.text, textObj.startX, textObj.startY);
    } else {
      ctx.fillStyle = textObj.colors;
      ctx.fillText(textObj.text, textObj.startX, textObj.startY);
    }
  }

  /**
   * @param {Number} x
   * @param {Number} y
   * @param {Number} r
   * @param {Number} startAngle
   * @param {Number} endAngle
   * @param {Number} lineWidth
   * @param {String } bgColor
   * @param {String } color
   * @param {Number} percentage
   * @param {Array<TextObj>} textConfig
   */
  drawAnnularProgress(
    x,
    y,
    r,
    startAngle,
    endAngle,
    lineWidth,
    bgColor,
    color,
    percentage,
    textConfig = []
  ) {
    // 绘制底图
    const bgCircle = new CircleObj(
      x,
      y,
      r,
      startAngle,
      endAngle,
      lineWidth,
      bgColor
    );
    this.drawCircle(bgCircle);
    // 绘制进度
    const perEnd = percentage * (endAngle - startAngle) + startAngle;
    const perCircle = new CircleObj(
      x,
      y,
      r,
      startAngle,
      perEnd,
      lineWidth,
      color
    );
    this.drawCircle(perCircle);
    // 绘制文本
    textConfig.forEach((text) => {
      this.drawText(text);
    });
  }

  /**
   * 画线
   * @param {Number} startX 
   * @param {Number} startY 
   * @param {Number} endX 
   * @param {Number} endY 
   * @param {Number} lineWidth 
   * @param {Array | String} colors 
   */
  drawLine(startX, startY, endX, endY, lineWidth, colors) {
    const ctx = this.ctx;
    ctx.beginPath();
    ctx.lineCap = "round";
    if (typeof colors === "string") {
      ctx.strokeStyle = colors;
    } else {
      ctx.strokeStyle = this.createLinearGrad(
        startX,
        startY,
        endX,
        endY,
        colors
      );
    }
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.lineWidth = lineWidth;
    ctx.stroke();
  }

  /**
   * @param {Number} startX 背景起始x
   * @param {Number} startY 背景起始y
   * @param {Number} endX 背景结束x
   * @param {Number} endY 背景结束y
   * @param {Number} lineWidth 进度条粗细
   * @param {String | Array} bgColors 背景颜色
   * @param {String | Array} colors 进度颜色
   * @param {Number} percentage 进度
   * @param {Array} textConfig 文本配置
   */
  drawProgress(
    startX,
    startY,
    endX,
    endY,
    lineWidth,
    bgColors,
    colors,
    percentage,
    textConfig = []
  ) {
    // 绘制底部
    this.drawLine(startX, startY, endX, endY, lineWidth, bgColors);
    const perEndY = percentage * (endY - startY) + startY;
    const perEndX = percentage * (endX - startX) + startX;
    // 绘制进度
    this.drawLine(startX, startY, perEndX, perEndY, lineWidth, colors);
    // 绘制文本
    textConfig.forEach((text) => {
      this.drawText(text);
    });
  }

}

export default CanvasUtils;


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/254324
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号