使用canvas绘制圆环进度条

最新推荐文章于 2024-05-31 10:29:13 发布
最新推荐文章于 2024-05-31 10:29:13 发布
阅读量2.8k 收藏 8
点赞数 2
分类专栏： canvas 面试 Vue 文章标签： javascript html5 canvas vue
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/mmyhs/article/details/122230153
版权
Vue 同时被 3 个专栏收录
6 篇文章 1 订阅
订阅专栏
面试
3 篇文章 0 订阅
订阅专栏
canvas
2 篇文章 0 订阅
订阅专栏

使用canvas绘制圆环进度条

技术要求

需要一点点数学基础
需要对 canvas 的常见的方法熟悉

一点点数学基础

已知圆心，半径，角度，求圆上的点坐标

canvas 常见的方法

菜鸟教程

扬帆起航

  1. 首先创建一个canvas ，并将这个dom添加在html中

方法名称：createCanvas

// 需要申明两个全局变量
let isIconLoadSuccess = false;
let iconLoading = null;

// 以下是一个方法
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
canvas.style.border = '1px #ccc solid';

// 提前加载图标数据
const imgObj = new Image();
imgObj.src = './success-filling.png';
imgObj.onload = function () {
  isIconLoadSuccess = true;
  iconLoading = this;
};

return canvas;
  1. 定义一个绘制圆环的方法

方法名称：drawCircle(ctx, config)

绘制圆环的思路
使用arc绘制一个圆形，在其内部填充一个样式，将圆的边框lineWidth设置的宽度大一点，这个宽度就是圆环的大小，设置strokeStyle的颜色，该颜色就是圆环的颜色，最后设置连接处样式lineCap，这里建议将lineCap设置成round
因为最终想要的是圆环，所以角度应该是(0,360)
最后调用stroke和closePath上色和关闭路径

const {
   x, y, radius, startAngle, endAngle, color, lineWidth,
 } = config;
 ctx.beginPath();
 ctx.arc(x, y, radius, startAngle, endAngle, false);
 // 设定曲线粗细度
 ctx.lineWidth = lineWidth;
 // 给曲线着色
 ctx.strokeStyle = color;
 // 连接处样式
 ctx.lineCap = 'round';
 // 给环着色
 ctx.stroke();
 ctx.closePath();
  1. 绘制圆环

方法名称：circle(percent = '0.0')

const { width, height } = canvas;
const ctx = canvas.getContext('2d');
// 清除画布
ctx.clearRect(0, 0, width, height);
// 保存
ctx.save();
/* 填充文字 */
ctx.font = '24px Microsoft YaHei';
/* 文字颜色 */
ctx.fillStyle = '#999';
/* 文字内容 */
const insertContent = '本月任务进度';
// 拿到文本内容的像素相关信息 单位长度(px)
const measureText = ctx.measureText(insertContent);
/* 插入文字，后面两个参数为文字在画布中的坐标点 */
/* 此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值 */
ctx.fillText(insertContent, (width - measureText.width) / 2, (height / 2) + 45);

/* 填充百分比 */
ctx.font = '60px Microsoft YaHei';
ctx.fillStyle = '#222';

const ratioStr = `${(parseFloat(percent) * 100).toFixed(0)} %`;
const text = ctx.measureText(ratioStr);
ctx.fillText(ratioStr, (width - text.width) / 2, (height / 2) + 10);

/* 开始圆环 */
const circleConfig = {
  /* 圆心坐标 */
  x: width / 2,
  y: height / 2,
  /* 半径，下方出现的150都是半径 */
  radius: (width / 2) - 30,
  /* 环的宽度 */
  lineWidth: 24,
  /* 开始的度数-从上一个结束的位置开始 */
  startAngle: 0, // 注意这里的0是3点钟方向，而非12点方向，和数学里的不一样
  /* 结束的度数 */
  endAngle: 360,
  color: '#E7EFF4',
};

/* 灰色的圆环 */
drawCircle(ctx, circleConfig);

/* 有色的圆环 */
const holeCicle = 2 * Math.PI;
const angle = percent * 360; // 圆弧的角度

// 圆心坐标：(x0, y0)
// 半径：r
// 弧度：a   => 圆弧计算公式：(角度/180)*Math/.PI
// 则圆上任一点为：（x1, y1）
// x1 = x0 + r * cos(a)
// y1 = y0 + r * sin(a)
const x1 = circleConfig.x + circleConfig.radius * Math.cos(((angle - 90) / 180) * Math.PI) - 25;
const y1 = circleConfig.y + circleConfig.radius * Math.sin(((angle - 90) / 180) * Math.PI) - 25;

// 处理渐变色
const gnt1 = ctx.createLinearGradient(circleConfig.radius * 2, circleConfig.radius * 2, 0, 0);
gnt1.addColorStop(0, '#FF8941');
gnt1.addColorStop(0.3, '#FF8935');
gnt1.addColorStop(1, '#FFC255');

drawCircle(ctx, {
  ...circleConfig,
  /* 从-90度的地方开始画 */
  startAngle: -0.5 * Math.PI, // 把起始点改成数学里的12点方向
  endAngle: -0.5 * Math.PI + percent * holeCicle,
  color: gnt1,
});

// 填充小图标
if (isIconLoadSuccess) {
  // 这里的this指的是imgObj，第二三个参数是它的坐标，四五个是长款
  ctx.drawImage(iconLoading, x1, y1, 50, 50);
}
  1. 来一点动画

方法名称：drawFrame(percent, callback)

// 在该方法之外声明一个全局变量
let speed = 0;
// 以下是 drawFrame 方法体
const id = window.requestAnimationFrame(() => { drawFrame(percent, callback); });
circle(speed.toString());
if (speed >= percent) {
  window.cancelAnimationFrame(id);
  speed = 0;
  if (callback) {
    callback();
  }
  return;
}
speed += 0.01;
  1. 再来一个快照功能

方法名称：createImage(src)

const image = new Image();
image.src = src;
return image;
  1. 调用声明好的方法
const app = document.getElementById('app');
const canvas = createCanvas();

let i = 0;
setInterval(() => {
  if (i > 1) {
    i = 0;
  }
  i = Math.random();
  drawFrame(i.toString(), () => {
    const image = createImage(canvas.toDataURL());
    app.appendChild(image);
    window.scrollTo(0, document.body.scrollHeight);
  });
}, 3000);

app.appendChild(canvas);

完整代码

<!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>进度条圆环</title>
  <style>
    body {
      width: 100%;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
  </style>
</head>

<body>
  <div id="app"></div>
</body>

<script>
  // 图标是否加载成功
  let isIconLoadSuccess = false;
  let iconLoading = null;
  function createCanvas() {
    const canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;
    canvas.style.border = '1px #ccc solid';

    // 提前加载图标数据
    const imgObj = new Image();
    imgObj.src = './success-filling.png';
    imgObj.onload = function () {
      isIconLoadSuccess = true;
      iconLoading = this;
    };

    return canvas;
  }

  const app = document.getElementById('app');
  const canvas = createCanvas();

  /* 画曲线 */
  function drawCircle(ctx, config) {
    const {
      x, y, radius, startAngle, endAngle, color, lineWidth,
    } = config;
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, false);
    // 设定曲线粗细度
    ctx.lineWidth = lineWidth;
    // 给曲线着色
    ctx.strokeStyle = color;
    // 连接处样式
    ctx.lineCap = 'round';
    // 给环着色
    ctx.stroke();
    ctx.closePath();
  }

  function circle(percent = '0.0') {
    const { width, height } = canvas;
    const ctx = canvas.getContext('2d');
    // 清除画布
    ctx.clearRect(0, 0, width, height);
    // 保存
    ctx.save();
    /* 填充文字 */
    ctx.font = '24px Microsoft YaHei';
    /* 文字颜色 */
    ctx.fillStyle = '#999';
    /* 文字内容 */
    const insertContent = '本月任务进度';
    // 拿到文本内容的像素相关信息 单位长度(px)
    const measureText = ctx.measureText(insertContent);
    /* 插入文字，后面两个参数为文字在画布中的坐标点 */
    /* 此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值 */
    ctx.fillText(insertContent, (width - measureText.width) / 2, (height / 2) + 45);

    /* 填充百分比 */
    ctx.font = '60px Microsoft YaHei';
    ctx.fillStyle = '#222';

    const ratioStr = `${(parseFloat(percent) * 100).toFixed(0)} %`;
    const text = ctx.measureText(ratioStr);
    ctx.fillText(ratioStr, (width - text.width) / 2, (height / 2) + 10);

    /* 开始圆环 */
    const circleConfig = {
      /* 圆心坐标 */
      x: width / 2,
      y: height / 2,
      /* 半径，下方出现的150都是半径 */
      radius: (width / 2) - 30,
      /* 环的宽度 */
      lineWidth: 24,
      /* 开始的度数-从上一个结束的位置开始 */
      startAngle: 0, // 注意这里的0是3点钟方向，而非12点方向，和数学里的不一样
      /* 结束的度数 */
      endAngle: 360,
      color: '#E7EFF4',
    };

    /* 灰色的圆环 */
    drawCircle(ctx, circleConfig);

    /* 有色的圆环 */
    const holeCicle = 2 * Math.PI;
    const angle = percent * 360; // 圆弧的角度

    // 圆心坐标：(x0, y0)
    // 半径：r
    // 弧度：a   => 圆弧计算公式：(角度/180)*Math/.PI
    // 则圆上任一点为：（x1, y1）
    // x1 = x0 + r * cos(a)
    // y1 = y0 + r * sin(a)
    const x1 = circleConfig.x + circleConfig.radius * Math.cos(((angle - 90) / 180) * Math.PI) - 25;
    const y1 = circleConfig.y + circleConfig.radius * Math.sin(((angle - 90) / 180) * Math.PI) - 25;

    // 处理渐变色
    const gnt1 = ctx.createLinearGradient(circleConfig.radius * 2, circleConfig.radius * 2, 0, 0);
    gnt1.addColorStop(0, '#FF8941');
    gnt1.addColorStop(0.3, '#FF8935');
    gnt1.addColorStop(1, '#FFC255');

    drawCircle(ctx, {
      ...circleConfig,
      /* 从-90度的地方开始画 */
      startAngle: -0.5 * Math.PI, // 把起始点改成数学里的12点方向
      endAngle: -0.5 * Math.PI + percent * holeCicle,
      color: gnt1,
    });

    // 填充小图标
    if (isIconLoadSuccess) {
      // 这里的this指的是imgObj，第二三个参数是它的坐标，四五个是长款
      ctx.drawImage(iconLoading, x1, y1, 50, 50);
    }
  }

  function createImage(src) {
    const image = new Image();
    image.src = src;
    return image;
  }

  // 动画函数
  let speed = 0;
  function drawFrame(percent, callback) {
    const id = window.requestAnimationFrame(() => { drawFrame(percent, callback); });
    circle(speed.toString());
    if (speed >= percent) {
      window.cancelAnimationFrame(id);
      speed = 0;
      if (callback) {
        callback();
      }
      return;
    }
    speed += 0.01;
  }
  
  
  let i = 0;
  setInterval(() => {
    if (i > 1) {
      i = 0;
    }
    i = Math.random();
    drawFrame(i.toString(), () => {
      const image = createImage(canvas.toDataURL());
      app.appendChild(image);
      window.scrollTo(0, document.body.scrollHeight);
    });
  }, 3000);

  app.appendChild(canvas);
</script>

</html>

使用到的小图标

在这里插入图片描述

最终效果图

在这里插入图片描述

明明有话说
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas实现环形进度条效果
08-31
本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形用户界面。它可以用来绘制...
canvas实现简易的圆环进度条效果
08-31
本文将探讨如何使用 Canvas 实现一个简易的圆环进度条效果。首先，我们需要理解 Canvas 的基本概念和方法，以及如何利用 JavaScript 控制其绘图过程。 Canvas 提供了一个二维绘图环境，通过 JavaScript API 可以...
使用canvas制作圆形进度条
m0_68349563的博客
12-26 819
使用 canvas 绘制圆形进度条
canvas实现环形进度条
大剑师兰特的GIS世界
11-03 287
与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。
JS实现可动的canvas环形进度条
最新发布
qq_52532624的博客
05-31 47
JavaScript实现可动的canvas环形进度条
4. Canvas绘制环形进度条
山间点烟雨
02-02 330
Canvas绘制环形进度条
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
thj13896076523的博客
02-08 1494
因为动画效果比较消耗性能，所以进度条单独canvas绘制
canvas实现有递增动画的环形进度条
xing.org1^
07-09 316
哈？标题不知道啥意思？ 老规矩，直接看图！ 效果如下： 高清大图！ 码农多年，老眼昏花，动图看不清？！那就看静态截图！！！ 不同分值效果如下： 看完了卖家秀，我们来看产品的制作过程吧！ canvas绘制圆环 1、vue中，<template lang="pug">里的代码如下： canvas#baseCanvas是底部的灰色圆环 canvas#myCanvas...
实现圆环进度条的三种方式 div svg canvas
05-02
本文将详细探讨使用HTML、CSS以及JavaScript的三种不同方式来实现圆环进度条，包括基于div、svg和canvas的方法。 一、Div方式实现圆环进度条 Div是最常见的HTML元素，通过CSS3的border-radius属性可以创建圆形，再...
C#-绘制好看的进度条用户控件-圆环进度条（中级）
03-15
而在WPF中，我们可以使用`UserControl`或者更底层的`Canvas`、`Path`等元素进行绘制。本案例中的“圆环进度条”可能更适合WPF，因为它提供了更强大的图形绘制能力。 要实现一个圆环进度条，我们需要以下几个关键...
html5 canvas进度条圆环图表统计动画特效
06-11
2. **绘制圆环**：要创建圆环，我们需要使用`arc()`方法。这个方法接受五个参数：圆心的x和y坐标，圆的半径，开始角度和结束角度（以弧度制表示），以及一个布尔值决定线条是否闭合。通过改变开始和结束角度，我们...
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
12-30
本文介绍了HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例，具体如下： 实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context = canvas.getContext('2d'), //获取画图环境，指明为2d cente
canvas-html5圆环进度条
03-07
上传文件时，如果文件较大，估计浏览器会处于一直加载中，如果用户不知道，误点其它操作，有可能造成文件上传失败，这里简单实现提示上传进度. 导入项目，运行http://localhost:8080/canvas/table.jsp 即可看到效果
canvas实现圆形进度条动画的示例代码
01-19
本文介绍了canvas实现圆形进度条动画，分享给大家，具体如下： 先给大家看看效果图，然后在上代码。 进度条动画 1. canvas的HTML部分很简单就一个canvas标签 canvas画布的宽高是自身的属性，要在行间样式设置，若是在style设置宽高会使你画的图片变形。 <canvas id=mycanvas width=100 height=100> 70% </canvas> 2.画布的js代码 主要思路：效果图中是由三个圆组成的，最外层是一个有黑边的大圆，里面一个改变进度条进度的圆和一个现实百分比的圆。 注意：每画一个圆都要新建一个图层，这样可以单独设置每个图层的样式
canvas绘制圆形加载进度条
yesir_mao的博客
07-09 2690
说明：该文章仅供学习和参考使用，转载请注明出处 1.需求：通过canvas绘制一个圆形的进度条 2.实现思路： 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度 2.3.2 开始新路径绘制 2.3.3 绘制加载圆环 3.实现过程如下：css样式设置 body { text-align: center...
Canvas 实现进度条展示统计数据示例
大剑师兰特的GIS世界
11-05 271
canvas可以画柱状图，如下就是一个例子，主要用到了lineWidth，beginPath，lineCap等知识点。
vue： 简单的canvas实现圆环进度条
weixin_44076167的博客
03-16 1749
效果如下： 代码如下： <template> <div> <!-- 圆环背景 --> <canvas id="canvas" style="width: 100%;height: 100%"> </canvas> </div> </template> <script> export default { // 电量环
canvas绘制环形进度条
weixin_30239339的博客
03-01 84
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <meta name="author" content="xuyunfei"&...
html5 canvas circle,HTML5 canvas 创意：飞翔的凤凰
weixin_42538175的博客
06-30 167
当我看到这件作品的时候，我表示非常喜欢。这个作品的产生不仅仅需要编程和算法，作者肯定是个充满了艺术细胞的人。倘若有什么canvas艺术作品比赛的话，我想它就是获奖的那个。先观赏下演示吧。注意，要看到效果，请确保你的浏览器支持 HTML 5。如果你还在使用旧版 IE，请更换新版浏览器。效果演示代码如下：function fillCircle(ctx, r){ctx.beginPath();ctx.m...
uniapp canvas绘制弧形圆环
07-28
你可以使用uniapp的canvas API来绘制弧形圆环。以下是一个示例代码： ```html <template> <view> <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> </view> </template> <script> export default { onReady() { // 获取canvas上下文 const ctx = uni.createCanvasContext('myCanvas', this); // 设置圆环的属性 const x = 150; // 圆心的x坐标 const y = 150; // 圆心的y坐标 const radius = 100; // 圆环的半径 const startAngle = 0; // 起始角度，单位为弧度 const endAngle = Math.PI * 2; // 结束角度，单位为弧度 const lineWidth = 10; // 圆环的线宽 const strokeStyle = '#f00'; // 圆环的颜色 // 绘制圆环 ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle); ctx.setLineWidth(lineWidth); ctx.setStrokeStyle(strokeStyle); ctx.stroke(); ctx.closePath(); // 绘制完成并显示在canvas上 ctx.draw(); } } </script> ``` 在上述代码中，我们首先通过`uni.createCanvasContext`获取到canvas的上下文对象。然后，我们设置了圆环的属性，包括圆心的坐标、半径、起始角度、结束角度、线宽和颜色。接下来，我们使用`ctx.beginPath()`开始绘制路径，通过`ctx.arc()`绘制弧形路径，再通过`ctx.setLineWidth()`设置线宽，`ctx.setStrokeStyle()`设置颜色，最后使用`ctx.stroke()`绘制圆环。最后，我们使用`ctx.draw()`将绘制的内容显示在canvas上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值