canvas完成圆形进度条动漫的示例编码

日期：2021-01-19 类型：科技新闻我要分享

关键词：抠图换背景，免费的抠图软件，美图抠图，手机抠图软件哪个好，p图软件哪个好用

本文详细介绍了canvas完成圆形进度条动漫，共享给大伙儿，实际以下：

先给大伙儿看看实际效果图，随后在上编码。

进度条动漫

1. canvas的HTML一部分很简易就1个canvas标识

canvas画布的宽高是本身的特性，要内行间款式设定，若是在style设定宽高会使你画的照片形变。

<canvas id="mycanvas" width="100" height="100">
70%
</canvas>

2.画布的js编码

关键思路：实际效果图中是由3个圆构成的，最外层是1个有黑边的大圆，里边1个更改进度条进度的圆和1个实际百分比的圆。

留意：每画1个圆都要新建1个涂层，这样能够独立设定每一个涂层的款式，之间不互相危害，就像ps的涂层1样，1个详细的设计方案稿全是许多涂层构成的。

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function draw(i){
// 大圆框
context.beginPath();
context.lineWidth = 1;
context.arc(50,50,46,0,Math.PI*2);
context.strokeStyle = "grey";
context.stroke();
// 大圆
context.beginPath();
var grd = context.createLinearGradient(15,15,80,80);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"blue");
context.arc(50,50,38,0,Math.PI*2*(i/100));
context.lineWidth = 16;
context.strokeStyle = grd;
context.stroke();
// context.fillStyle = grd;
// context.fill();
// 小圆
context.beginPath();
context.arc(50,50,30,0,Math.PI*2);
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
context.fillStyle = "white";
context.fill();
// 字
context.beginPath();
context.textBaseline = "middle";
context.textAlign = "center";
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText(i+"%",50,50);
}

3. 应用计时器来更新画布，做到进度条的实际效果

应用context.clearRect()方式来清空画布的

var i = 0;
var progress = parseInt(canvas.innerHTML);
// console.log(progress);
var timer = setInterval(function(){
if(i >= progress){
clearInterval(timer);
}
context.clearRect(0,0,canvas.width,canvas.height);
draw(i);
i++;
},50);

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：canvas简单制图的完成（海棉宝宝篇）返回下一篇：没有了