使用canvas rotate实现一个旋转的矩形,并且以矩形的中心为原点,围绕原点旋转:
<canvas id="canvas" width="800" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.translate(400,200); setInterval(function(){ ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果 ctx.beginPath(); ctx.lineWidth = "4"; ctx.strokeStyle = '#cccccc'; ctx.rotate(0.01 * Math.PI); // 旋转方法 ctx.rect(-150,-100,300,200); // 画300*200的矩形,并把矩形的中心点跟画布原点重合 ctx.stroke(); },5); </script>
当然也可以使用strokeRect来实现,代码如下:
<canvas id="canvas" width="800" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.translate(400,200); setInterval(function(){ ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果 ctx.lineWidth = "4"; ctx.strokeStyle = '#cccccc'; ctx.rotate(0.01 * Math.PI); // 旋转方法 ctx.strokeRect(-150,-100,300,200); // 画300*200的矩形,并把矩形的中心点跟画布原点重合 },5); </script>
从以上代码可以看出,canvas的rect()和strokeRect()达到的效果是一样的,只是:rect()只是创建矩形,但是没有在画布上绘画,需要通过stroke()和fill()方法在画布上实际的绘画;而strokeRect()方法实际上会在画布上绘制矩形,该方法绘制矩形默认的笔触颜色为黑色,可以通过strokeStyle来修改填充颜色。
参考地址: