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

    参考地址:

  • 相关阅读:
    一、vue常用指令
    win10安装和配置node
    win10安装和配置java8
    二、vue-cli4.5脚手架创建vue项目
    配置分布式事务实例:springcloud-Hoxton.SR1+springboot2.2.2+nacos1.3.2+seata1.2.0
    centos7安装frps_0.31.1
    centos7安装nginx1.18.0
    docker安装nexus3
    centos7防火墙的配置
    centos7使用Apache实现HTTP访问SVN资源库
  • 原文地址:https://www.cnblogs.com/moqiutao/p/14744715.html
Copyright © 2020-2023  润新知