怎么在HTML5中利用canvas绘制哆啦A梦头部

怎么在HTML5中利用canvas绘制哆啦A梦头部？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

效果如下：

代码如下：

<div class="doraemon">    <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas></div><script>       var face = document.getElementById('face').getContext("2d");       face.arc(252,252,250,0,360*Math.PI/180);        face.fillStyle = '#07beea';  //设置填充颜色         face.fill();  //填充         face.lineWidth = 2;   //轮廓线宽度         face.strokeStyle = '#333';   //轮廓线颜色         face.stroke();   //画轮廓线         face.beginPath();     //重置当前绘画路径         face.moveTo(160,450);   //画笔移动到起始点         face.bezierCurveTo(0,400,0,110,210,115);    //三次贝塞尔曲线（左边）         face.lineTo(290,115);           face.bezierCurveTo(500,110,500,400,340,450);          face.bezierCurveTo(280,470,220,470,160,450);          face.fillStyle = '#fff';        face.fill();        face.stroke();   //画出边框         face.beginPath();         //重置当前绘画路径 用于画眼睛和鼻子         face.moveTo(150,150);        face.lineTo(150,100);        //左眼左竖线         face.bezierCurveTo(160,50,240,50,250,100);   //左眼下面         face.lineTo(250,150);            //左眼右竖线         face.bezierCurveTo(240,200,160,200,150,150);   //左眼上面         face.moveTo(250,150);        face.lineTo(250,100);              //右眼左竖线         face.bezierCurveTo(260,50,340,50,350,100);   //右眼上面         face.lineTo(350,150);               //右眼右竖线         face.bezierCurveTo(340,200,260,200,250,150);   //右眼下面         face.fillStyle = '#fff';        face.fill();        face.stroke();                 face.beginPath();          face.arc(225,155,10,0,360*Math.PI/180);   //眼珠          face.arc(275,155,10,0,360*Math.PI/180);         face.fillStyle = '#333';            face.fill();         face.beginPath();    //鼻子          face.arc(250,197,25,0,360*Math.PI/180);            face.fillStyle = '#c93e00';            face.fill();         face.stroke();         face.beginPath();          face.arc(260,190,10,0,360*Math.PI/180);         var grd = face.createRadialGradient(260,190,2,260,190,10);   //设置内外圆原点和半径            grd.addColorStop(0,'#fff');         grd.addColorStop(1,'#c93e00');         face.fillStyle = grd;         face.fill();         //嘴巴          face.beginPath();         face.moveTo(250,222);         face.lineTo(250,395);         face.moveTo(100,320);         face.bezierCurveTo(180,420,320,420,400,320);         face.lineWidth = 3;         face.stroke();         //胡须          face.beginPath();         face.moveTo(80,200);         face.lineTo(180,220);         face.moveTo(80,245);         face.lineTo(180,245);         face.moveTo(80,290);         face.lineTo(180,270);         face.moveTo(320,220);         face.lineTo(420,200);         face.moveTo(320,245);         face.lineTo(420,245);         face.moveTo(320,270);         face.lineTo(420,290);         face.stroke();</script>

看完上述内容，你们掌握怎么在html5中利用canvas绘制哆啦A梦头部的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网精选频道，感谢各位的阅读！