<!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>