canvas一周一练 -- canvas绘制中国银行标志（4） - 张不丢_H5之家

运行效果：

<!DOCTYPE html> <html> <head> </head> <body> <canvas id=width=height=>A drawing of someing!</canvas> <script type=> drawBoc = function(){ ); if(drawing.getContext) { ); //画外环 context.fillStyle = ; context.strokeStyle = ; context.beginPath(); context.arc(200, 200, 100, 0, 2*Math.PI, false); context.closePath(); context.stroke(); context.fill(); context.save(); context.fillStyle = ; context.beginPath(); context.arc(200, 200, 77, 0, 2*Math.PI, false); context.closePath(); context.stroke(); context.fill(); //画外面的口（圆角矩形） context.restore(); roundRec(context, 150, 160, 100, 80, 25, true, false); //画里面的口 context.fillStyle = ; context.fillRect(170, 180, 60, 40); //画上下两竖 context.fillStyle = ; context.fillRect(190, 123, 20, 37); context.fillRect(190, 240, 20, 37); } }; roundRec = function(context, x, y, width, height, radius, fill, stroke){ ) { stroke = true; } ) { radius = 5; } context.beginPath(); context.moveTo(x+radius, y); context.lineTo(x+width-radius, y); context.quadraticCurveTo(x+width, y, x+width, y+radius); context.lineTo(x+width, y+height-radius); context.quadraticCurveTo(x+width, y+height, x+width-radius, y+height); context.lineTo(x+radius, y+height); context.quadraticCurveTo(x, y+height, x, y+height-radius); context.lineTo(x, y+radius); context.quadraticCurveTo(x, y, x+radius, y); context.closePath(); if(stroke) { context.stroke(); } if(fill) { context.fill(); } }; drawBoc(); </script> </body> </html>