【效果】使用canvas rotate实现一个旋转的矩形

使用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来修改填充颜色。

参考地址：

posted @ 2021-05-08 21:51  风雨后见彩虹  阅读(1505)  评论(0)  编辑  收藏  举报