Функции с Easel JS

Я пытаюсь (и терпеть неудачу) несчастно с Easel JS и Canvas. Я немного новичок в холсте в целом и изучаю JS. Я в основном пытаюсь сделать холст, который я могу обновить с помощью цветов, которые передаются нажатием кнопки.Функции с Easel 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 тела, и передав идентификатор вашего холста (который использует 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(); 
}

Вы можете также определить ваши сценарии в теле, после того, как элемент холста, так что они инициализации после того, как элемент готов.

Обратите внимание, что в вашей скрипке нет библиотек createjs, и JSFiddle будет запускать часть кода скрипта во время события onload, поэтому вы можете не видеть проблему, с которой вы столкнулись локально.

источник

2016-02-08 16:25:27 Lanny

ответ

Смежные вопросы