首先在页面中创建一个canvas标签：
<body> <canvas id="c1" width="500" height="500"></canvas> </body>
js部分：
注意save()和restore()的运用，在num累加的情况下，保存路径和恢复路径可以让方块匀速运动；
定义变量num和value来设置临界点的方法。
<script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; var num2 =0; var value = 1; setInterval(function(){ num++; oGC.save(); //让旋转匀速运动 不然num值是累加的 旋转角度越来越大 oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(200,200); oGC.rotate(num*Math.PI/180); //这里设置缩放效果 利用num2和value值的关系控制缩放的临界点 if(num2==100){ value = -1; }else if(num2==0){ value = 1; } num2 += value; oGC.scale(num2*(1/50),num2*(1/50)); oGC.translate(-50,-50); oGC.fillRect(0,0,100,100); oGC.restore(); },30) }； </script>