【Html5每日练习】canvas笑脸

￡神魔★判官ぃ 2022-06-13 11:29 369阅读 0赞

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下

  1. <html lang="en-US">
  2. <canvas id=myCanvas width=200px height=200px></canvas>
  4. <script>
  5.     var myCanvas = document.getElementById("myCanvas");
  6.     var context = myCanvas.getContext("2d");
  8.     context.strokeStyle = "blue";
  9.     context.lineWidth = 5;
  10.     context.strokeRect(0,0,200,200);
  11.     //context.closePath();
  13.     //context.beginPath();
  14.     context.strokeStyle = "red";
  15.     context.lineWidth = 2;
  16.     context.arc(100,100,60,0,2*Math.PI,true);
  17.     context.moveTo(140,100);
  18.     context.arc(100,100,40,0,Math.PI,false);
  19.     context.moveTo(85,80);
  20.     context.arc(80,80,5,0,2*Math.PI,true);
  21.     context.moveTo(125,80);
  22.     context.arc(120,80,5,0,2*Math.PI,true);
  23.     context.stroke();
  24. </script>
  25. </html>

如下图：

1334145747_1976.png

发表评论

表情：
评论列表 （有 0 条评论，369人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【html5每日练习】 html5 canvas "米"

    上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一

    悠悠悠悠/ 0 赞/ 343 阅读