功能随着画架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

回答

相关问题