HTML5 | Canvas中變數範圍與setInterval()方法的影響

最後更新：2017-07-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：不同 function click index inpu body ack 多個針對

Demo - 隨機繪製圓環實現思路：

將一個圓環的繪製分成100份，setInterval()方法定義每隔時間n繪製一段新的，每份的開始路徑都是上一次的結束路徑，實現步進繪製。
通過Math.random()，隨機產生圓的座標半徑顏色。

實現方法：

定義畫布和聯絡
設定步進屬性
設定隨機圓屬性（5個參數：x，y，半徑，開始，結束，方向）
迴圈執行繪畫

<<index.html>>

<!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的一刻
全域變數：sAngle, eAngle; 局部變數：var step, x, y, r;
在控制台輸出情況可以看到，當起始位置為全域變數時相互幹擾的非常厲害，但因為step是局部變數，調用的是不同的副本，最後兩個圈均執行到了99。並且可以看到控制台中drawID是間隔出現的，對兩次setInterval方法輪流執行，也就造成了sAngle位置是跳躍的虛點。
局部變數：var step ,sAngle, eAngle, x, y, r;
但要注意的是在該樣本中共用同一個畫布和聯絡(ctx)，在這裡畫筆的顏色和樣式被重新整理成為新的。那麼應該如何在同一畫布中同時繪畫不同樣式？
全域變數：step; 局部變數：var sAngle, eAngle, x, y, r;
在第二次點擊出現的圈繪到約半圈時停止
點擊button重新執行InitDraw();step=0; 從列印資訊可以看到兩個不同的setInterval方法對step變數相互幹擾，直到step有機會到達99時停止繪圖。
...一共64種變化，謹慎定義Canvas中的變數範圍

關於Context的另一個測試：

在同一個畫布中調用擷取兩個Context，但通過輸出可以看到每個畫布只有一個對應的Context

經過幾個Demo的分析得到以下結論：

在調用同一個function時候，私人變數互不相干，會像C一樣得到不同的副本各自存值
Canvas的Context樣式（strokeStyle/shadowColor/...）是針對該Canvas（畫布）唯一的，即
如果同時調用setInterval方法，則輪流執行，1,2,1,2,1,2...以此類推
謹慎使用setInterval方法，同時運行多個會導致相互幹擾

遺留問題：

如何同時繪畫不同樣式？

HTML5 | Canvas中變數範圍與setInterval()方法的影響

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More