谷歌图标html5代码 HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)

HTML5 canvas绘制chrome图标

使用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值

})