标签：function tran width 效果 style 默认 can wan java
使用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来修改填充颜色。
参考地址：
标签：function tran width 效果 style 默认 can wan java
原文地址：https://www.cnblogs.com/moqiutao/p/14744715.html
