C/C++教程

用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画个笑脸的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航