码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-05-24 02:25:51      阅读:0      评论:0      收藏:0      [点我收藏+]

标签: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来修改填充颜色。

参考地址:

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

标签:function   tran   width   效果   style   默认   can   wan   java   

原文地址:https://www.cnblogs.com/moqiutao/p/14744715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!