[代码收集]HTML5的Canvas标签绘制中国银行的标志图案 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-03-04 06:07:54 -0500

★HTML5的Canvas标签绘制中国银行的标志图案★

请勿抄袭本页面

代码说明

使用HTML5的Canvas标签画出中国银行的标志图案，十分逼真的Canvas绘图实例。转自源码爱好者

html代码

<script type="text/javascript">
function drawBoc(){
var ctx = document.getElementById("boc").getContext('2d');
//外环
ctx.beginPath();
ctx.strokeStyle="#ff0000";
ctx.arc(100,150,100,0,Math.PI*2,false);
ctx.fillStyle="#ff0000";
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(100,150,77,0,Math.PI*2,false);
ctx.stroke();
ctx.fillStyle="#FFFFFF";
ctx.fill();
//外面的口（画圆角矩形）
ctx.beginPath();
ctx.fillStyle="red";
//ctx.fillRect(52,110,95,80);
roundRect(ctx,52,110,95,80,25,true,false);
ctx.beginPath();
//标志里面的“口”
ctx.fillStyle="#FFFFFF";
ctx.fillRect(74,131,52,37);
ctx.beginPath();
//“中”字的上下两竖
ctx.fillStyle="red";
ctx.fillRect(87,60,25,55);
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(88,180,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();
 }        
}
window.onload=drawBoc;
</script>
<canvas id="boc" width="250" height="250"></canvas>

代码演示

[代码仅供参考，转载请注明出处]

----Comments(1)----
幻龙 (@fhl) | @ at 2014-03-04 08:48:
确实，，

Subscribe | Register | Login | N