HTML5 canvas画简单的叮当猫头

html5的canvas是很强大的，下面本篇文章使用html5 canvas 实现一个简单的叮当猫头部。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1. <div class="doraemon">
   
2.     <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas>
   
3. </div>
   
4. <script>
   
5.        var face = document.getElementById('face').getContext("2d");
   
6.        face.arc(252,252,250,0,360*Math.PI/180);
   
7.        face.fillStyle = '#07beea';  //设置填充颜色
   
8.          face.fill();  //填充
   
9.          face.lineWidth = 2;   //轮廓线宽度
   
10.          face.strokeStyle = '#333';   //轮廓线颜色
    
11.          face.stroke();   //画轮廓线
    
12. 
    
13.          face.beginPath();     //重置当前绘画路径
    
14.          face.moveTo(160,450);   //画笔移动到起始点
    
15.          face.bezierCurveTo(0,400,0,110,210,115);    //三次贝塞尔曲线（左边）
    
16.          face.lineTo(290,115);   
    
17.         face.bezierCurveTo(500,110,500,400,340,450);  
    
18.         face.bezierCurveTo(280,470,220,470,160,450);  
    
19.         face.fillStyle = '#fff';
    
20.         face.fill();
    
21.         face.stroke();   //画出边框
    
22. 
    
23.          face.beginPath();         //重置当前绘画路径 用于画眼睛和鼻子
    
24.          face.moveTo(150,150);
    
25.         face.lineTo(150,100);        //左眼左竖线
    
26.          face.bezierCurveTo(160,50,240,50,250,100);   //左眼下面
    
27.          face.lineTo(250,150);            //左眼右竖线
    
28.          face.bezierCurveTo(240,200,160,200,150,150);   //左眼上面
    
29.          face.moveTo(250,150);
    
30.         face.lineTo(250,100);              //右眼左竖线
    
31.          face.bezierCurveTo(260,50,340,50,350,100);   //右眼上面
    
32.          face.lineTo(350,150);               //右眼右竖线
    
33.          face.bezierCurveTo(340,200,260,200,250,150);   //右眼下面
    
34.          face.fillStyle = '#fff';
    
35.         face.fill();
    
36.         face.stroke();
    
37. 
    
38.         
    
39.          face.beginPath();
    
40.          face.arc(225,155,10,0,360*Math.PI/180);   //眼珠
    
41.           face.arc(275,155,10,0,360*Math.PI/180);
    
42.          face.fillStyle = '#333';   
    
43.          face.fill();
    
44. 
    
45.          face.beginPath();    //鼻子
    
46.           face.arc(250,197,25,0,360*Math.PI/180);   
    
47.          face.fillStyle = '#c93e00';   
    
48.          face.fill();
    
49.          face.stroke();
    
50. 
    
51.          face.beginPath();
    
52.          face.arc(260,190,10,0,360*Math.PI/180);
    
53.          var grd = face.createRadialGradient(260,190,2,260,190,10);   //设置内外圆原点和半径  
    
54.           grd.addColorStop(0,'#fff');
    
55.          grd.addColorStop(1,'#c93e00');
    
56.          face.fillStyle = grd;
    
57.          face.fill();
    
58. 
    
59.          //嘴巴
    
60.           face.beginPath();
    
61.          face.moveTo(250,222);
    
62.          face.lineTo(250,395);
    
63.          face.moveTo(100,320);
    
64.          face.bezierCurveTo(180,420,320,420,400,320);
    
65.          face.lineWidth = 3;
    
66.          face.stroke();
    
67. 
    
68.          //胡须
    
69.           face.beginPath();
    
70.          face.moveTo(80,200);
    
71.          face.lineTo(180,220);
    
72.          face.moveTo(80,245);
    
73.          face.lineTo(180,245);
    
74.          face.moveTo(80,290);
    
75.          face.lineTo(180,270);
    
76. 
    
77.          face.moveTo(320,220);
    
78.          face.lineTo(420,200);
    
79.          face.moveTo(320,245);
    
80.          face.lineTo(420,245);
    
81.          face.moveTo(320,270);
    
82.          face.lineTo(420,290);
    
83.          face.stroke();
    
84. 
    
85. </script>

复制代码