【Html5每日练习】canvas绘制坐标变换图形

拼搏现实的明天。 2022-06-13 12:14 334阅读 0赞

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下

  1. <html lang="en-US">
  2. <canvas id=myCanvas width=500px height=500px></canvas>
  4. <script>
  5.     var myCanvas = document.getElementById("myCanvas");
  6.     var context = myCanvas.getContext("2d");
  8.     context.translate(250,100);
  9.     context.fillStyle = "rgba(0,0,255,0.25)";    
  10.     for(var i=0;i<45;i++)
  11.     {
  12.         //context.beginPath();
  13.         context.scale(0.93,0.93);
  14.         context.rotate(Math.PI/9);
  15.         context.translate(35,12);
  16.         context.fillRect(0,0,100,50);
  17.     }
  19. </script>
  20. </html>

1334374746_3762.png

在写了这个代码以后，我还发现了一个有趣的现象，哈哈~~~

发表评论

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

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

相关阅读

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

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

    悠悠悠悠/ 0 赞/ 345 阅读