【Html5每日练习】canvas绘制坐标变换图形 拼搏现实的明天。 2022-06-13 12:14 222阅读 0赞 前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下 <html lang="en-US"> <canvas id=myCanvas width=500px height=500px></canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.translate(250,100); context.fillStyle = "rgba(0,0,255,0.25)"; for(var i=0;i<45;i++) { //context.beginPath(); context.scale(0.93,0.93); context.rotate(Math.PI/9); context.translate(35,12); context.fillRect(0,0,100,50); } </script> </html> ![1334374746_3762.png][] 在写了这个代码以后，我还发现了一个有趣的现象，哈哈~~~ [1334374746_3762.png]: https://img-my.csdn.net/uploads/201204/14/1334374746_3762.png
还没有评论，来说两句吧...