H5 Canvas | 画布中变量做用域与setInterval方法同步执行探究

时间 2019-11-08

标签 h5 canvas 画布变量 setinterval 方法同步执行探究繁體版

原文原文链接

Demo - 随机绘制圆环

实现思路：

将一个圆环的绘制分红100份，setInterval()方法定义每隔时间n绘制一段新的，每份的开始路径都是上一次的结束路径，实现步进绘制。
经过Math.random()，随机生成圆的坐标半径颜色。

实现方法：

定义画布和联系
设置步进属性
设置随机圆属性（5个参数：x，y，半径，开始，结束，方向）
循环执行绘画

<<index.html>>javascript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    #canvas {
        border: 1px black solid;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width="1000" height="400">您的浏览器不支持canvas</canvas>
    <input type="button" onclick="InitDraw()" value="draw">
    <script type="text/javascript">
    function InitDraw() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var ctx2 = canvas.getContext('2d');

        var step;
        // var sAngle;
        // var eAngle;
        var x, y, r;
        var add, stepTime, counterClockwise;
        // 步进属性
        step = 0;
        add = Math.PI * 2 / 100;
        stepTime = 20;
        // 随机圆属性
        sAngle = 0;
        eAngle = sAngle + add;
        counterClockwise = false;
        x = Math.random() * 800 + 100;
        y = Math.random() * 200 + 100;
        r = Math.random() * 50 + 50;
        ctx.strokeStyle = "#" + (Math.random() * 0x1000000 << 0).toString(16);
        ctx.shadowColor = "#" + (Math.random() * 0x1000000 << 0).toString(16);
        console.log(ctx.strokeStyle);
        console.log(ctx2.strokeStyle);
        ctx.lineWidth = 1.0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 10;

        // 画圆
        var drawID = setInterval(Draw, stepTime);

        function Draw() {
            if (step < 100) {
                // 绘制路径并画
                ctx.beginPath();
                ctx.arc(x, y, r, sAngle, eAngle, counterClockwise);
                ctx.stroke();
                ctx.closePath();
                // 步进
                sAngle = eAngle;
                eAngle += add;
                // console.log("drawID:" + drawID + ",step:" + step);
                // console.log(ctx.strokeStyle);
                step++;
            } else {
                clearInterval(drawID);
            }
        }

    }
    </script>
</body>

</html>

在不一样的变量环境下出现了不一样的状况：

全局变量：step, sAngle, eAngle , x, y, r;

在执行绘图过程当中持续变化的参数是step,sAngle,eAngle,再次调用时回到函数InitDraw();从新定义六个全局变量以及画笔样式，则从新开始绘图。上一个step和画笔样式都停留在按下button的一刻 css
全局变量：sAngle, eAngle; 局部变量：var step, x, y, r;

在控制台输出状况能够看到，当起始位置为全局变量时相互干扰的很是厉害，但由于step是局部变量，调用的是不一样的副本，最后两个圈均执行到了99。而且能够看到控制台中drawID是间隔出现的，对两次setInterval方法轮流执行，也就形成了sAngle位置是跳跃的虚点。 html
局部变量：var step ,sAngle, eAngle, x, y, r;

但要注意的是在该示例中共用同一个画布和联系(ctx)，在这里画笔的颜色和样式被刷新成为新的。那么应该如何在同一画布中同时绘画不一样样式？ java
全局变量：step; 局部变量：var sAngle, eAngle, x, y, r;

在第二次点击出现的圈绘到约半圈时中止 canvas

点击button从新执行InitDraw();step=0; 从打印信息能够看到两个不一样的setInterval方法对step变量相互干扰，直到step有机会到达99时中止绘图。浏览器
...一共64种变化，谨慎定义Canvas中的变量做用域

关于Context的另外一个测试：

在同一个画布中调用获取两个Context，但经过输出能够看到每一个画布只有一个对应的Contextdom

通过几个Demo的分析获得如下结论：函数

在调用同一个function时候，私有变量互不相干，会像C同样获得不一样的副本各自存值
Canvas的Context样式（strokeStyle/shadowColor/...）是针对该Canvas（画布）惟一的
若是同时调用setInterval方法，则轮流执行，1,2,1,2,1,2...以此类推
谨慎使用setInterval方法，同时运行多个会致使相互干扰

遗留问题：测试

如何同时绘画不一样样式？

H5 Canvas | 画布中变量做用域与setInterval方法同步执行探究

Demo - 随机绘制圆环

实现思路：

实现方法：

在不一样的变量环境下出现了不一样的状况：

全局变量：step, sAngle, eAngle , x, y, r;

全局变量：sAngle, eAngle; 局部变量：var step, x, y, r;

局部变量：var step ,sAngle, eAngle, x, y, r;

全局变量：step; 局部变量：var sAngle, eAngle, x, y, r;

关于Context的另外一个测试：