HTML5는 캔버스를 사용하여 도라에몽의 머리를 그립니다(코드 예)

html5 캔버스는 매우 강력합니다. 다음 기사에서는 html5 캔버스를 사용하여 간단한 도라에몽 헤드를 구현합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

효과는 다음과 같습니다:

코드는 다음과 같습니다:

<div class="doraemon">
    <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas>
</div>
<script>
       var face = document.getElementById(&#39;face&#39;).getContext("2d");
       face.arc(252,252,250,0,360*Math.PI/180); 
       face.fillStyle = &#39;#07beea&#39;;  //设置填充颜色
         face.fill();  //填充
         face.lineWidth = 2;   //轮廓线宽度
         face.strokeStyle = &#39;#333&#39;;   //轮廓线颜色
         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 = &#39;#fff&#39;;
        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 = &#39;#fff&#39;;
        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 = &#39;#333&#39;;   
         face.fill();

         face.beginPath();    //鼻子
          face.arc(250,197,25,0,360*Math.PI/180);   
         face.fillStyle = &#39;#c93e00&#39;;   
         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,&#39;#fff&#39;);
         grd.addColorStop(1,&#39;#c93e00&#39;);
         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는 캔버스를 사용하여 도라에몽의 머리를 그립니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!