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

最新推荐文章于 2024-07-26 15:50:48 发布

coder_yihua

最新推荐文章于 2024-07-26 15:50:48 发布

阅读量460

点赞数

分类专栏： canvas 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45737062/article/details/128037405

版权

编写的一个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>

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

最低0.47元/天解锁文章