Canvas繪制標(biāo)志【中國銀行標(biāo)志HTML5】

2024-09-05 12:19:07

字體：大中小

供稿：網(wǎng)友

使用HTML5的Canvas標(biāo)簽畫出中國銀行的標(biāo)志圖案，十分逼真的Canvas繪圖實例，通過這個Canvas畫圖實例你可以了解不少HTML5繪圖方面的實例，我想是相當(dāng)不錯的。本標(biāo)志和PhotoShop制作出來的效果有一拼。

<html><head><title>Canvas繪圖例子，畫標(biāo)志</title><script type="text/javascript">function drawBoc(){var ctx = document.getElementById("boc").getContext('2d');//外環(huán)ctx.beginPath();ctx.strokeStyle="#ff0000";ctx.arc(200,250,100,0,Math.PI*2,false);ctx.fillStyle="#ff0000";ctx.stroke();ctx.fill();ctx.beginPath();ctx.arc(200,250,77,0,Math.PI*2,false);ctx.stroke();ctx.fillStyle="#FFFFFF";ctx.fill();//外面的口（畫圓角矩形）ctx.beginPath();ctx.fillStyle="red";//ctx.fillRect(152,210,95,80);roundRect(ctx,152,210,95,80,25,true,false);ctx.beginPath();//標(biāo)志里面的“口”ctx.fillStyle="#FFFFFF";ctx.fillRect(174,231,52,37);ctx.beginPath();//“中”字的上下兩豎ctx.fillStyle="red";ctx.fillRect(187,160,25,55);ctx.beginPath();ctx.fillStyle="red";ctx.fillRect(188,280,25,55);}//圓角矩形function roundRect(ctx, x, y, width, height, radius, fill, stroke) {	if (typeof stroke == "undefined" ) {		stroke = true;	}	if (typeof radius === "undefined") {		radius = 5;	}	ctx.beginPath();	ctx.moveTo(x + radius, y);	ctx.lineTo(x + width - radius, y);	ctx.quadraticCurveTo(x + width, y, x + width, y + radius);	ctx.lineTo(x + width, y + height - radius);	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);	ctx.lineTo(x + radius, y + height);	ctx.quadraticCurveTo(x, y + height, x, y + height - radius);	ctx.lineTo(x, y + radius);	ctx.quadraticCurveTo(x, y, x + radius, y);	ctx.closePath();	if (stroke) {		ctx.stroke();	}	if (fill) {		ctx.fill();	}        }</script></head><body onload="drawBoc();"><canvas id="boc" width="800" height="500"></canvas></body></html>

上一篇：HTML5仿Flickr網(wǎng)頁加載動畫效果

下一篇：判斷檢測瀏覽器是否支持HTML5相關(guān)屬性