JavaScript实现可动的canvas环形进度条

目录
  • 介绍
  • 1.创建canvas元素
  • 2.绘制的准备工作
  • 3.绘制环形底层
  • 4.绘制进度层
  • 5.绘制字体并指定位置
  • 6.进度动画

介绍

今天分享一个环形进度条的写法,当然这只是一个可动的静态进度条,如果你喜欢可以加入后台数据。这种进度条非常简单的写法到处都有,只不过更多的只是写个样子,咱们这个可以动哟。

前提是canvas的属性、方法和一些基础的js API你都知道,当然为了保证一些忘记的小伙伴一下想起来,我会在前面列个表。

属性和方法 描述
getContext() 返回一个用于在画布上绘图的环境
strokeStyle 画笔(绘制图形)颜色或者样式的属性
lineWidth 设置线段厚度的属性
save() 保存canvas全部状态的方法(入栈)
beginPath() 创建一个新的路径的方法
arc(原点x,原点y,半径,起始角度,结束角度,默认false顺时针) 绘制圆弧路径的方法
stroke() 绘制路径的方法
closePath() 闭合绘制路径
restore() 恢复到最近的保存状态的方法(出栈)
fillStyle 颜色和样式的属性
font 当前字体样式的属性
toFixed(num) 把Number四舍五入为指定小数位数的数字

回顾完上表开始绘制图形,图形的绘制除了canvas元素之外还有以下几个部分,我先分开把代码按部分写出:

1.创建canvas元素

先创建一个canvas的标签给出宽高,绘制环形进度宽高一致就可以,之后获取元素,并创建画布。注意canvas元素这里起名mycanvas,绘制的画布对象叫ctx。

<canvas id="mycanvas" width="200" height="200"></canvas>
//以下为js代码
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');

2.绘制的准备工作

绘制之前需要做一些准备工作

  • 找到“画布的中心点”的,进度条
  • 将进度条按照进度的比例分成100份,按照100%完成
  • 指定初始加载步长(长度),注意这是初始化后期可以改成0
//找到画布的中心点
var canvasX = mycanvas.width / 2;
var canvasY = mycanvas.height / 2;
//进度条是100%,所以要把一圈360度分成100份
var progress = Math.PI * 2 / 100;
//指定初始加载步长
var steps = 0.5;

3.绘制环形底层

先把进度的环形底层浅灰色的环绘制出来,它是进度的路径。可以先把绘制的颜色和线宽指定好,这两个属性对下面的方法顺序起不到影响。

ctx.strokeStyle = '#dddddd';
ctx.lineWidth = 20;
ctx.save();
ctx.beginPath();
ctx.arc(canvasX, canvasY, 90, 0, Math.PI * 2, false)
ctx.stroke();
ctx.closePath();
ctx.restore();

4.绘制进度层

进度层绘制的颜色需要定义出来,另外进度条的粗细与底层环形的粗细相同。这里最重要的一句是,在结束角度的时候加入了“steps progress” 步长 进度。steps 数值越小乘成数之后增加的角度就少,steps数值大乘数之后进度增加的就多。

ctx.strokeStyle = "#47cab0";
ctx.lineWidth = 20;
ctx.save();
ctx.beginPath();
ctx.arc(canvasX,canvasY,90, -Math.PI/2, -Math.PI/2+steps*progress,false);
ctx.stroke();
ctx.closePath();
ctx.restore();

5.绘制字体并指定位置

环形的进度百分比文字显示需要使用canvas的文字绘制,这里需要注意数字是从1位到3位的跨度,还要加入%,因此位置需要变化。当数字到100时文字占宽就更大因此要改变绘制起点。

ctx.fillStyle = "#000000"; //可改
ctx.font = "bold 26px Arial"; //可改
ctx.save();
// canvasX-30, canvasY+10  中的加减的数值可改
if (steps.toFixed(0).length == 3) {
   ctx.fillText(steps.toFixed(0) + '%', canvasX - 30, canvasY + 10);
} else {
   ctx.fillText(steps.toFixed(0) + '%', canvasX - 20, canvasY + 10);
}
ctx.restore();

写到这里静态的一个进度就会出现,但是我们还需要让他动起来,大家可能想到的定时器。但我们却使用了另一种编写循环动画的方法。

6.进度动画

显示器的刷新频率通常是50~60hz,1000ms/60≈16.6ms,相当于每秒钟重绘60次,大多数浏览器都不会超过显示器的重绘频率。之前的文章我们曾经提到过setTimeout()和setInterval()这两种循环其实并不那么精准智能,即使使用setTimeout()以自调的方式模拟循环定时器,也不能确保处理线程可以按照理想之行。

window.requestAnimationFrame()

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。 回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

因此为了保证平滑渲染,我们使用,window.requestAnimationFrame(),在该方法的参数一个回调函数中做几件事:

1.判断完成整个环形步长的结束值,如:100,其实就是走到100%的位置,75就是走到75%的位置

2.在选择的步长范围内调用增长的函数

window.requestAnimationFrame(function () {
//判断步子最终走多远的边界值,此值可以改
  if (steps < 90) {
  //该函数在边界内可以调用函数,增加步长并且绘制图形给这个函数起个名字
  }
})

因为有函数的自调用,所以我们把这部分写在一起,不拆分写了。难度就在此处!

第一步:要先做,把之前所有的绘制图形代码放入新创建的函数DrawShape中,并且需要接收两个参数。一个是要绘制的对象,因为一个页面上不止一个画布对象。第二个参数就是每次会改变的步长。

//绘制形状函数,传入画布对象和每次都会改变的步长
function DrawShape(ctx,steps) {
//画圆
      画底层圆形的代码...
//画进度环
      画进度条的代码...
//绘制字体并指定位置
      绘制字体的代码...
}

第二步:创建animate函数用来执:平滑动画、行步长的增加、绘制图形三件重要事宜。

//初始调用动画函数
animate();
//动画函数
function animate() {
//执行平滑动画
window.requestAnimationFrame(function () {
//判断步子最终走多远的边界值,此值可以改
if (steps < 90) {
//该函数在边界内可以调用
       animate();
    }
 });
//清空绘制内容
 ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
//每次增加的步长,数值越大步子越大跑的越快,数值越小走的越慢
 steps += 0.5;//可改
//调用绘制形状函数,传入参数绘制对象,环形进度步长
 DrawShape(ctx,steps);
};

以上代码是全部代码只是没有合并整理格式,大家可以自己整理

到此这篇关于JavaScript实现可动的canvas环形进度条的文章就介绍到这了,更多相关JavaScript canvas环形进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv

  • JS实现环形进度条(从0到100%)效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • JavaScript实现圆形进度条效果

    本文实例为大家分享了JavaScript实现圆形进度条效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

  • js实现增加数字显示的环形进度条效果

    效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/

  • JS实现圆形进度条拖拽滑动

    本文实例为大家分享了JS实现圆形进度条拖拽滑动的具体代码,供大家参考,具体内容如下 效果展示 半圆进度条效果 圆形进度条 代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&q

  • JS实现拖拽进度条改变元素透明度

    今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #pa

  • JavaScript实现可动的canvas环形进度条

    目录 介绍 1.创建canvas元素 2.绘制的准备工作 3.绘制环形底层 4.绘制进度层 5.绘制字体并指定位置 6.进度动画 介绍 今天分享一个环形进度条的写法,当然这只是一个可动的静态进度条,如果你喜欢可以加入后台数据.这种进度条非常简单的写法到处都有,只不过更多的只是写个样子,咱们这个可以动哟. 前提是canvas的属性.方法和一些基础的js API你都知道,当然为了保证一些忘记的小伙伴一下想起来,我会在前面列个表. 属性和方法 描述 getContext() 返回一个用于在画布上绘图的

  • 详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • canvas实现环形进度条效果

    昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下 先上代码,然后在说一说需要注意的点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align:

  • JavaScript canvas复刻苹果发布会环形进度条

    目录 前言 基础 Dom 结构 基本变量 画圆 画弧线 让画面动起来 总结 前言 canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d.3d 游戏,也让浏览器能承载更加强大的功能.尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩. 在线地址 最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来:这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个

  • canvas绘制环形进度条

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.

  • Android中制作进度框和环形进度条的简单实例分享

    进度框 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import java.util.Random; public class ObliqueProgressbar ext

  • Android实现环形进度条的实例

    Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

  • Android实现环形进度条

    一个通俗易懂的环形进度条,可以定制颜色角度,监听进度. 定义一个attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleProgressView"> <!--画笔宽度--> <attr name="progress_width" format=&q

  • 微信小程序自定义组件实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva

随机推荐