• 【效果】使用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来修改填充颜色。

    参考地址:

  • 相关阅读:
    Maven安装及配置
    Java部分概念理解
    API.day01
    随机生成10元素数组并找出最大元素(Java)
    冒泡排序(Java)
    俄罗斯方块部分功能(Java)
    判断闰年(Java)
    判断质数(Java)
    基于DSP的IS95正向业务信道模块设计
    Lua程序设计(4th) 第一部分 语言基础
  • 原文地址:https://www.cnblogs.com/moqiutao/p/14744715.html
Copyright © 2020-2023  润新知