canvas实例：旋转缩放的方块
Posted 雨水一盒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas实例：旋转缩放的方块相关的知识，希望对你有一定的参考价值。
首先在页面中创建一个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>
以上是关于canvas实例：旋转缩放的方块的主要内容，如果未能解决你的问题，请参考以下文章