canvas制作 加载圆

主要原理 -- 利用了canvas和定时器的结合~

//获取绘制环境

varcanvas = document.getElementById("myCanvas");

var canvasObj = canvas.getContext("2d");

vardeg = 90;//存储开始的角度

//绘制图形

function draw () {

canvasObj.clearRect(0,0,canvas.width,canvas.height);

deg++;//每次添加角度

//绘制最底层的圆

canvasObj.beginPath();

canvasObj.arc(300,300,200,0,Math.PI* 2,false);

//填充

canvasObj.fillStyle= "#ddd";

canvasObj.fill();

//中间的圆

canvasObj.beginPath();

canvasObj.arc(300,300,150,0,Math.PI* 2,false);

canvasObj.shadowBlur = 10;

canvasObj.shadowColor = "black";

//填充

canvasObj.fillStyle= "#eee";

canvasObj.fill();

//画彩色的圆弧

canvasObj.beginPath();

canvasObj.arc(300,300,160,-Math.PI/ 180 * 90,(-Math.PI/ 180 * deg),true);

canvasObj.lineWidth = 20;

//添加线性渐变

varlinearG = canvasObj.createLinearGradient(300,120,300,470);

//添加渐变的颜色

linearG.addColorStop(0,"deepskyblue");

linearG.addColorStop(1,"purple");

//边线

canvasObj.strokeStyle= linearG;

canvasObj.stroke();

//画百分比

canvasObj.textAlign= "center";

canvasObj.fillStyle = "greenyellow";

canvasObj.font = "80px serif";

var str = Math.floor((deg - 90)/ 360 * 100)+ "%";

canvasObj.fillText(str,300,320);

if (deg== 450) {

clearInterval(timer);

}

}

var timer = setInterval(draw,20);