<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; var inum2 = 0; var value = 1; setInterval(function () { num++; oGC.save(); if(inum2 == 100) { value = -1; } else if(inum2 == 0) { value = 1; } inum2 += value; oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(100,100); oGC.rotate(num*Math.PI/180); oGC.scale(inum2*1/50,inum2*1/50); oGC.translate(-50,-50); oGC.fillRect(0,0,100,100); oGC.restore(); },30) } </script> <style> body{ background:pink; } #c1{ background:white; } </style> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>