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>

---

代码演示

---

---