使用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>

使用canvas实现超绚丽的旋转正方形

上一篇:MongoDB(课时4 数据增加)


下一篇:word中的域代码