其他分享
首页 > 其他分享> > 用canvas画个笑脸

用canvas画个笑脸

作者：互联网

<!DOCTYPE>

<HTML>

 <HEAD>

  <TITLE> 画个笑脸 </TITLE>

  <META  charset="utf-8">

  </HEAD>

 <BODY>

<canvas id="canvas" width="600" height="400"></canvas>

  <script type="text/javascript">

     var canvas = document.getElementById("canvas");

     var ctx = canvas.getContext("2d");

     //绘制脸

     ctx.beginPath(); //开始绘制路径

     ctx.arc(300,200, 140, 0, Math.PI*2); //绘制圆弧

     ctx.fillStyle = "yellow";

ctx.fill();

    //绘制眼睛

     ctx.beginPath();

     ctx.arc(230,150, 33, 0, Math.PI*2);

      ctx.stroke();

     ctx.fillStyle = "black";

     ctx.fill();

    //绘制眼睛

     ctx.beginPath();

     ctx.arc(370,150, 33, 0, Math.PI*2);

     ctx.stroke();

     ctx.fillStyle = "black";

     ctx.fill();

    //绘制嘴巴

     ctx.beginPath();

     ctx.arc(300,160, 110, 0.5,  Math.PI*0.8,false);

     ctx.lineWidth = 8;

ctx.strokeStyle = 'white';

        ctx.stroke();

 </script>

</BODY>

</HTML>

笑脸1.png


标签：canvas,笑脸,ctx,arc,画个,PI,绘制,Math
来源： https://blog.51cto.com/u_2955599/2747023