<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #000" width="600" height="600"> </canvas>
<script>
var canvas = document.getElementById(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
var angle = 10;
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);//清屏
ctx.save();
ctx.beginPath();
ctx.translate(300,250);//围绕矩形的中心点旋转
ctx.rotate(angle*Math.PI/180)//设置矩形旋转
// 绘制矩形
ctx.fillStyle = ‘red‘
ctx.fillRect(-100,-50,200,100)//fillrect(矩形宽度的一半，矩形高度的一半，矩形长度，矩形宽度)
ctx.restore();
angle++
},20)
</script>
</body>
</html>
