怎么使用canvas绘制中国银行标志

　　运行效果：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　</head>

　　<body>

　　<canvas id="drawing" width="600" height="400">A drawing of someing!</canvas>

　　//绘制中国银行标志

　　var drawBoc = function（）{

　　var drawing = document.getElementById（'drawing'）;

　　if（drawing.getContext） {

　　var context = drawing.getContext（'2d'）;

　　//画外环

　　context.fillStyle = '#f00';

　　context.strokeStyle = '#f00';

　　context.beginPath（）;

　　context.arc（200, 200, 100, 0, 2*Math.PI, false）;

　　context.closePath（）;

　　context.stroke（）;

　　context.fill（）;

　　context.save（）;

　　context.fillStyle = '#fff';

　　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 = '#fff';

　　context.fillRect（170, 180, 60, 40）;

　　//画上下两竖

　　context.fillStyle = '#f00';

　　context.fillRect（190, 123, 20, 37）;

　　context.fillRect（190, 240, 20, 37）;

　　}

　　};

　　//画圆角矩形

　　var roundRec = function（context, x, y, width, height, radius, fill, stroke）{

　　if（typeof stroke == 'undefined'） {

　　stroke = true;

　　}

　　if（typeof radius == 'undefined'） {

　　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>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h59914.shtml