使用canvas实现超绚丽的旋转正方形
自己无意中的一个小“bug”,却让动画变得超绚丽= =
所以,不要害怕出bug,谁知道bug不会开出一朵绚丽的花呢?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> body{ text-align: center; } canvas{ border:1px dashed green; } </style> </head> <body> <canvas id="cvs" width="800" height="600"></canvas> <script> var cvs=document.getElementById("cvs"); var context=cvs.getContext("2d"); /*超绚丽的旋转*/ var agle=0; context.translate(cvs.width/2-50,cvs.height/2-50) setInterval(function () { //擦除画布,(因为坐标轴旋转的原因,没有擦完全) context.clearRect(-800,-600,800,600); context.rotate(agle); context.strokeRect(0,0,100,100); agle+=0.01; },30) </script> </body> </html>