使用canvas绘制chrome logo
$ele:null,
ele:null,
context:null
}
$(function(){
oCanvas.ele=document.getElementById('canvas');
oCanvas.context=oCanvas.ele.getContext('2d');
oCanvas.$ele=$(oCanvas.ele);
//red
oCanvas.context.fillStyle="#E6433C";
oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);
oCanvas.context.lineTo(172,96);
oCanvas.context.lineTo(100,200);
oCanvas.context.closePath();
oCanvas.context.fill();
oCanvas.context.translate(412,143)
oCanvas.context.rotate(128.8*Math.PI/180);
//yellow
oCanvas.context.beginPath();
oCanvas.context.fillStyle="#FCD20A";
oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);
oCanvas.context.lineTo(172,96);
oCanvas.context.lineTo(100,200);
oCanvas.context.closePath();
oCanvas.context.fill();
oCanvas.context.translate(412,143)
oCanvas.context.rotate(128.8*Math.PI/180);
//green
oCanvas.context.beginPath();
oCanvas.context.fillStyle="#4DB749";
oCanvas.context.arc(172,172,172,1.1445*Math.PI,1.8555*Math.PI);
oCanvas.context.lineTo(172,96);
oCanvas.context.lineTo(100,200);
oCanvas.context.closePath();
oCanvas.context.fill();
//中间圆圈
oCanvas.context.beginPath();
oCanvas.context.fillStyle="#7BAFDE";
oCanvas.context.lineWidth="12";
oCanvas.context.strokeStyle="#F7F2EF";
oCanvas.context.arc(172,172,72,0*Math.PI,2*Math.PI);
oCanvas.context.fill();
oCanvas.context.stroke();
//需考虑如何智能计算从中心旋转时候translate值
})