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