canvas中實現旋轉縮放的方塊
阿新 • • 發佈：2018-11-30
round win style context color width can ima else
canvas實現旋轉縮放的方塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{background: #000;} #ca{background:#999} </style> <script> window.onload=function(){ var oc=document.getElementById("ca"); var pa=oc.getContext(‘2d‘); var num=0; var numb=0; var value=1; pa.translate(100,100); setInterval(function(){ num++; pa.save(); pa.clearRect(-100,-100,oc.width,oc.height); if(numb==100){ value=-1; }else if(numb==0){ value=1; } numb+=value; pa.scale(numb*1/50,numb*1/50); pa.rotate(num*Math.PI/180); pa.translate(-50,-50); pa.fillRect(0,0,100,100); pa.restore(); },30); }; </script> </head> <body> <canvas id="ca" width="400px" height="400px"></canvas> </body> </html>
效果：
canvas中實現旋轉縮放的方塊