<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>变形</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //1.旋转 context.translate(200, 200); //平移到正方形中心 var deg = 360; setInterval(function () { rotate(deg * 180 / Math.PI); deg/4; }, 100) var rotate = function (deg) { context.rotate(deg); context.fillRect(-50, -50, 100, 100); context.clearRect(-50, -50, 100, 100); context.beginPath(); context.moveTo(-100, -100); context.lineTo(100, 100); context.moveTo(-100, 100); context.lineTo(100, -100); context.closePath(); context.strokeStyle = "#00ff00"; context.stroke(); } } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的浏览器暂不支持画布！ </canvas> </body> </html>