html5 canvas绘制圆形进度实例

作者：佳明妈来源：未知 2015-03-17 人气：

html5 canvas绘制圆形进度实例

<canvas id="test" width=200 height=200></canvas>

var canvas2d = document.getElementById("test").getContext("2d");

var deg = 0;

var test = function(deg){

var r = deg*Math.PI/180; //canvas绘制圆形进度

canvas2d.clearRect(0,0,200,200); //先清理

canvas2d.beginPath(); //路径开始

//canvas2d.fillStyle = "#fff"; //填充颜色

canvas2d.strokeStyle = "#dddddd"; //canvas边框颜色

canvas2d.lineWidth = 6; //线宽

canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false); //canvas绘制弧形

//canvas2d.fill();

canvas2d.stroke();

//canvas2d.closePath();

};
//使用定时器让html5 canvas绘制圆形进度动起来

var t = setInterval(function(){

deg+=10;

test(deg);

if(deg>360){

clearInterval(t);

}

console.log(deg);

},20);

//懒人建站http://www.51xuediannao.com/

↓ 查看全文

本文链接：html5 canvas绘制圆形进度实例https://www.51xuediannao.com/html5/canvas_progress.html

html5 canvas绘制圆形进度实例由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

活跃用户