谁会用canvas绘制谷歌浏览器logo

谁会用canvas绘制谷歌浏览器logo

<title>HTML5 canvas绘制chrome图标</title>
<h1><p>使用canvas绘制chrome logo</p>
<script src="这里填写jQuery文件引用地址"></script>
<canvas id="canvas" width="344" height="344" ></canvas><br />
<style>body{background-color:white;}</style>
<script>var oCanvas={
$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();
})</script>代码如上，需要更改一下jQuery引用地址。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息