HTML5 canvas繪制chrome瀏覽器 logo圖標

2024-09-05 12:19:03

字體：大中小

來源：轉載

供稿：網友

HTML5學習第兩天寫出的：HTML5 canvas繪制chrome瀏覽器 logo圖標，不錯不錯，很逼真的LOGO，用了JavaScript共同實現，之前也收集過一些Canvas畫Logo的例子，有興趣的在本欄目搜索下，對學習HTML5，特別是Canvas的使用，絕對是有幫助的。

<title>HTML5 canvas繪制chrome圖標</title><h1><p>使用canvas繪制chrome logo</p><script src="/ajaxjs/jquery-1.8.3.min.js"></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();//需考慮如何智能計算從中心旋轉時候translate值})</script>

上一篇：彩色圓環旋轉的HTML5網頁加載特效

下一篇：html5 canvas繪制線條