HTML5 | Canvas中變量作用域與setInterval()方法的影響

阿新 • • 發佈：2017-07-25

通過 value utf 出現 close span arc shadow cli

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()方法的影響

通過 value utf 出現 close span arc shadow cli Demo - 隨機繪制圓環實現思路：將一個圓環的繪制分成100份，setInterval()方法定義每隔時間n繪制一段新的，每份的開始路徑都是上一次的結束路徑，實現步進繪制。通

vba中變量作用域

標準運行 ring ref cin box http stat 打開參考：http://club.excelhome.net/thread-1237085-1-1.html 全局變量例子public 變量1 AS IntegerSub LLL()變量1 =

變量作用域與解構賦值

方法 ber undefine 作用域定義變量模式變量 bob def 在JavaScript中，用var申明的變量實際上是有作用域的。如果一個變量在函數體內部申明，則該變量的作用域為整個函數體，在函數體外不可引用該變量： ‘use strict‘; functio

關於while read line 循環中變量作用域的問題

作用完成 nbsp 默認使用從數據 sql 語句發生文件前一陣用shell寫了一個從數據庫中抽取數據生成.xml文件的腳本，要求是每個文件中只生成1000條數據。於是用到了while read line 作為循環。在制作文件計數器的時候發現了一個問題，在執行的

JavaScript學習記錄day6-函數變量作用域、解構賦值與方法

標準只有一個 from 裝飾器喜歡賦值全局 lang edge JavaScript學習記錄day6-函數變量作用域、解構賦值與方法 @(學習)[javascript] [TOC] 1. 作用域在JavaScript中，用var申明的變量實際上是有作用域的。如果

python變量作用域,函數與傳參

printf last 輸出引用 error module str color 變量引用一、元組傳值: 一般情況下函數傳遞參數是1對1，這裏x,y是2個參數，按道理要傳2個參數，如果直接傳遞元祖，其實是傳遞一個參數 >>> def show(

Js中常用知識點（typeof、動態屬性、變量作用域）

常用知識 sage 打印 bject 理解各類 swa clas java 1、Js中各類型的常量表示形式：Number：number String：string Object：objec 2、typeof運算符在Js中的使用：用於判斷某一對象是何種類型，返

HTML代碼中在兩個匿名函數中使用同名變量出現bug而引起的變量作用域的思考

資源管理 normal col gin image pac cor align 程序　　在學習HTML的時候，為了方便地對同一個css樣式的不同值的效果進行對比，我做成了下面這個樣子。代碼也是很典型的用於展示的格式（p元素的內容隨便寫的）： 1 <head&

PHP和Go中的閉包變量作用域

reac 繼續循環我們 get .com https Golan 例子關於閉包函數，之前在聊過。這裏忽略了一點，不管是Go/Php/Python，閉包都存在局部變量的引用。我們還是先看個例子： PHP示例： $list = []; for ($i = 0; $i &

轉 linux shell自定義函數(定義、返回值、變量作用域)介紹

shel 自己 lai cell define ber article clas ner linux shell 可以用戶定義函數，然後在shell腳本中可以隨便調用。下面說說它的定義方法，以及調用需要註意那些事項。一、定義shell函數(define function)

javascript痛點之一變量作用域

容易 error: 排查使用 javascrip bug efi ron 變量提升 1.用var聲明的變量是有作用域的,比如我們在函數中用var聲明一個變量 1 ‘use strict‘; 2 function num(){ 3 //用var聲明一個變量num1

深入理解JavaScript變量作用域

結果局部變量全局對象優先 man ++ for tro pan 　　JS變量作用域特點：　　a、JS變量作用域是基於其特有的作用域鏈的。　　b、JavaScript沒有塊級作用域。　　c、函數中聲明的變量在整個函數中都有定義。 1、作用域鏈 var rain

js隨筆-變量作用域

return define highlight 全局向上不能 efi 訪問 turn 1.函數中定義的變量只在函數中起作用，所以兩個函數定義相同的變量互不影響 function fun(){ var i=0 } console.log(i);//i is not

js學習--變量作用域

有意 window cti 很好 padding blog oca 菜鳥而是作為一名菜鳥的我，每天學點的感覺還是不錯的。今天學習閉包的過程中看到作用域與作用域鏈這兩個概念，我覺得作為一名有追求的小白，有必要詳細了解下。變量的作用域就js變量而言，有全局變量和局部變量

類的無參帶參方法、變量作用域、JavaDoc文檔註釋、包

並且函數定義語句 min() 可選 aaa null 棧內存構造方法如何定義類的方法　　public 返回值類型方法名(){ 　　　　//方法的主體 } return: 如果有返回值跳出方法、返回結果、如果一個方法有返回值的話，那調用這個方法

初學JAVA的變量作用域

變量聲明初始局部變量 www 學java 技術分享一個 ont run 變量的範圍是程序中該變量可以被引用的部分。方法內定義的變量被稱為局部變量。局部變量的作用範圍從聲明開始，直到包含它的塊結束。局部變量必須聲明才可以使用。方法的參數範圍涵蓋整個方法。參數

python變量作用域和模塊

run pack python對象好用 span global 使用 font one 全局變量：全局變量可以在整個程序範圍內訪問。局部變量：局部變量只能在其被聲明的函數內部訪問。 globvar = 0 def set_globvar_to_one(): gl

TensorFlow 變量作用域變量管理共享變量

共享變量設置我們 www 中大 bsp spa 文章 init 當我們的神經網絡擁有很復雜的模塊時，我們使用TensorFlow提供的變量作用域(tf.variable_scope)來管理這些變量。變量作用域的兩個核心方法： tf.get_variable(<

c# 語言變量作用域

length 定義 class array 代碼大括號 bsp pre else 今天工作發現如下代碼會報錯 1 if (oskarray.Length > 0) 2 { 3 4 5 } 6 el

[劉陽Java]_步步窺探JS變量作用域

div strong javascrip gen doc not cee 定義 light 今天的這個文章題目名稱甚是讓人會突發異想。JS變量作用域是務必需要搞懂的，單從面試過程就會讓面試者燒腦殼。所以，我們還是寫一篇關於JS變量作用域的技術專題，讓所有小夥伴能夠借此文章去

HTML5 | 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的另一個測試：

相關推薦