HTML5利用canvas繪制哆啦A夢(mèng)頭部（代碼實(shí)例）

html5的canvas是很強(qiáng)大的，下面本篇文章使用html5 canvas 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的哆啦A夢(mèng)頭部。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

效果如下：

代碼如下：

<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';  //設(shè)置填充顏色          face.fill();  //填充          face.lineWidth = 2;   //輪廓線寬度          face.strokeStyle = '#333';   //輪廓線顏色          face.stroke();   //畫(huà)輪廓線           face.beginPath();     //重置當(dāng)前繪畫(huà)路徑          face.moveTo(160,450);   //畫(huà)筆移動(dòng)到起始點(diǎn)          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();   //畫(huà)出邊框           face.beginPath();         //重置當(dāng)前繪畫(huà)路徑 用于畫(huà)眼睛和鼻子          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);   //設(shè)置內(nèi)外圓原點(diǎn)和半徑             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>