Canvas绘制标志【中国银行标志HTML5】

2024-09-05 12:19:07

字体：大中小

来源：转载

供稿：网友

使用HTML5的Canvas标签画出中国银行的标志图案，十分逼真的Canvas绘图实例，通过这个Canvas画图实例你可以了解不少HTML5绘图方面的实例，我想是相当不错的。本标志和PhotoShop制作出来的效果有一拼。

<html><head><title>Canvas绘图例子，画标志</title><script type="text/javascript">function drawBoc(){var ctx = document.getElementById("boc").getContext('2d');//外环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();//标志里面的“口”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网页加载动画效果

下一篇：判断检测浏览器是否支持HTML5相关属性

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注