canvas 笔记之圆

/**

* 圆形进度条

* 描述：1、支持在环形进度条中显示百分比

* 2、支持绕环渐变

*/

function drawProcess()

{

var canvas = $("canvas")[0];

var context = canvas.getContext(‘2d‘);

context.clearRect(0, 0, 100, 100);

context.fillStyle = "transparent"

canvas.width = 100;

canvas.height = 100;

// 画灰色的圆

var drawGrayCircle = function() {

context.beginPath();

context.arc(50, 50, 50, 0, Math.PI * 2, false);

context.closePath();

context.fillStyle = ‘#ddd‘;

context.fill();

};

var process = 0; // 进度

var linear = context.createLinearGradient(0, 0, 100, 100);

var drawRed = function() {

context.save();

// 画红色的圆

context.beginPath();

var startDeg = -Math.PI / 2 + Math.PI * 2 * process / 100;

var endDeg = -Math.PI / 2 + Math.PI * 2 * (++process) / 100;

context.moveTo(50, 50);

context.arc(50, 50, 50, startDeg, endDeg, false);

//        context.translate(50, 50);

//        context.rotate(-Math.PI / 2);

context.fillStyle = context.strokeStyle = getCurColor(process);

context.closePath();

context.fill();

context.stroke();

context.restore();

drawEmptyCircle();

drawText();

progress = setTimeout(drawRed, 1000 / 60);

if (process == 100)

{

clearTimeout(progress);

progress = null;

console.log(canvas.toDataURL("image/jpeg"))

}

if (process == 60)

{

console.log(canvas.toDataURL("image/png"));

console.log(context.lineWidth);

}

};

var progress = setTimeout(drawRed, 1000 / 60);

/**

* 画空的圆

*/

var drawEmptyCircle = function() {

context.beginPath();

context.arc(50, 50, 45, 0, Math.PI * 2, true);

context.closePath();

context.fillStyle = ‘rgba(255,255,255,1)‘;

context.fill();

};

// 写字

var drawText = function() {

context.save();

context.font = "bold 14px Arial";

context.fillStyle = ‘green‘;

context.textAlign = ‘center‘;

context.textBaseline = ‘middle‘;

//        context.translate(50, 50);

//        context.rotate(-Math.PI / 2);

context.fillText(process + "%", 50, 50);

context.restore();

};

/**

* 画轮廓

*/

var drawOutline = function(){

// 保存上下文状态

context.save();

context.beginPath();

context.arc(50, 50, 46, 0, Math.PI * 2, true);

context.closePath();

context.lineWidth = 1;

context.strokeStyle = ‘yellow‘;

context.stroke();

// 恢复上下文

context.restore();

};

var startColor = ‘rgb(249, 72, 80)‘;

var endColor = ‘rgb(255, 255, 255)‘;

var rStep = (255 - 249) / 100;

var gStep = (255 - 72) / 100;

var bStep = (255 - 80) / 100;

var getCurColor = function(deg){

var normalDeg = deg * 180 / Math.PI;

var aRgb = [];

aRgb.push((249 + rStep * process).toFixed(0));

aRgb.push((72 + gStep * process).toFixed(0));

aRgb.push((80 + bStep * process).toFixed(0));

return ‘rgb(‘ + aRgb.join(‘,‘) + ‘)‘;

};

drawOutline();

setTimeout(function(){

$(‘<iframe id="frame"></iframe>‘).appendTo("body")

canvas.onclick = function(){

// var o = window.open(canvas.toDataURL(), "","width=1,   height=1,top=5000,left=5000");

//// location.href = canvas.toDataURL();

// o.document.execCommand("saveas")

// o.close()

document.all("frame").location = canvas.toDataURL()

document.execCommand("SaveAs");

}

})

}

drawProcess();

/**

* 饼图1

* 描述：1、支持动画效果

* 2、支持在扇形上显示百分比

* 3、支持动画

* 4、扇形的个数和颜色很容易配置

*/

function drawCircle()

{

var PI = 3.14;

// var PI = Math.PI;

var colors = ["#4F81BD", "#C0504D", "#9BBB59", "red", "#3c3c3c", "green"];

var data = [30, 20, 10, 20, 10, 10];

var canvas = document.getElementsByTagName("canvas")[0];

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

var startDeg = 0;

var requestFrame = {};

var per = PI * 2 / 100;

for(var i = 0, length = data.length; i < length; i++)

{

requestFrame[‘percentage‘ + i] = data[i] + "%";

}

var doDraw = function(startDeg, endDeg, color, index){

if(startDeg < endDeg)

{

ctx.save();

var curDeg = startDeg + per;

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.arc(50, 50, 50, startDeg, curDeg, false);

ctx.fillStyle = color;

ctx.strokeStyle = color;

ctx.closePath();

ctx.fill();

ctx.stroke();

ctx.restore();

requestFrame[i] = requestAnimationFrame(doDraw.bind(this, curDeg, endDeg, color, index));

}

else

{

cancelAnimationFrame(requestFrame[index]);

// ctx.clearRect(0, 0, 100, 100);

ctx.save();

ctx.fillStyle = "red";

ctx.beginPath();

ctx.translate(50, 50);

ctx.arc(0, 0, 5, 0, PI * 2, false);

ctx.closePath();

ctx.fill();

console.log("%c" + requestFrame[‘startDeg‘ + index] + "~~~~~~~~" + requestFrame[‘endDeg‘ + index], "font-size:14px;color:purple;")

var rotateDeg = (requestFrame[‘endDeg‘ + index] - requestFrame[‘startDeg‘ + index]) / 2 + requestFrame[‘startDeg‘ + index];

ctx.beginPath();

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.font = "14px";

ctx.fillStyle = "#FFFFFF";

if(rotateDeg <= 3 / 2 * PI && rotateDeg > 1 / 2 * PI)

{

rotateDeg += PI;

ctx.rotate(rotateDeg);

ctx.translate(-50, 0);

}

else

{

ctx.rotate(rotateDeg);

}

ctx.fillText(requestFrame[‘percentage‘ + index], 25, 0);

ctx.closePath();

ctx.restore();

}

};

canvas.width = 100;

canvas.height = 100;

for (var i = 0; i < data.length; i++)

{

var endDeg = startDeg + per * data[i];

requestFrame[‘startDeg‘ + i] = startDeg;

requestFrame[‘endDeg‘ + i] = endDeg;

requestFrame[i] = requestAnimationFrame(doDraw.bind(this, startDeg, endDeg, colors[i], i));

console.log(startDeg + "~~~~" + endDeg)

startDeg = endDeg;

}

}

drawCircle();

/**

* 饼图2 无特效

*/

var color = ["#27255F","#2F368F","#3666B0"];

var data = [50, 20, 30];

function drawCircle(){

var canvas = document.getElementsByTagName("canvas")[0];

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

var startPoint=0;

canvas.height = 155

for(var i=0;i<data.length;i++){

ctx.fillStyle = color[i];

ctx.beginPath();

ctx.moveTo(100,100);

ctx.strokeStyle = color[i];

var endDeg = startPoint+Math.PI*2*(data[i]/100)

ctx.arc(100,100,50,startPoint,endDeg,false);

console.log(startPoint+"~~~~"+endDeg)

ctx.fill();

ctx.stroke()

startPoint+=Math.PI*2*(data[i]/100);

}

}

drawCircle();