功能隨着畫架JS

我想（和失敗）與畫架JS和畫布悲慘。一般來說，我對畫布有點新鮮，並且也學習JS。我基本上試圖製作一個可以用顏色更新的畫布，通過點擊按鈕傳遞。功能隨着畫架JS

I have made a Fiddle to show my work so far.

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>IllustratorSetup</title> 
    <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script> 
    <script>  
    var stage = new createjs.Stage("canvas"); 
    var circle = new createjs.Shape(); 

    function drawRectangle(){ 
     var rect = new createjs.Shape(); 
     rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80); 
     stage.addChild(rect); 
     stage.update(); 
    } 

    function drawShapes(){ 
     drawRectangle(); 
     stage.update(); 
    } 

    </script> 
</head> 
<body onload="drawShapes()"> 
    <canvas id="canvas" width="500" height="300"></canvas> 
    <button onclick="drawRectangle('#ff0000')">Click me for red</button> 
</body> 
</html>

來源

2016-02-07 Skyzo

您的演示可能不起作用，因爲您要定義階段身體的onload之前，並將其傳遞畫布的ID（它使用的document.getElementById引擎蓋下）。只有在正文中創建後，canvas元素纔可用。

我建議將不在函數中的代碼移動到init（），或者將其放入drawShapes方法中。

var stage, circle; // Keep them global 

function drawRectangle(){ 
    var rect = new createjs.Shape(); 
    rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80); 
    stage.addChild(rect); 
    //stage.update(); // Unnecessary, since it is called in drawShapes. 
} 

function drawShapes(){ 
    stage = new createjs.Stage("canvas"); 
    circle = new createjs.Shape(); 
    drawRectangle(); 
    stage.update(); 
}

您還可以在canvas元素之後的主體中定義腳本，以便在元素準備就緒後進行初始化。

請注意，您的小提琴沒有其中的createjs庫，並且JSFiddle將在onload事件中觸發小提琴的代碼部分，因此您可能看不到您在本地遇到的問題。

來源

2016-02-08 16:25:27 Lanny

功能隨着畫架JS

回答

相關問題