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);

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