gpt4 book ai didi

javascript - Easel JS 的函数

转载 作者:行者123 更新时间:2023-11-28 06:24:17 25 4
gpt4 key购买 nike

我正在尝试使用 Easel JS 和 Canvas(但失败了)。总的来说,我对 canvas 有点陌生,也在学习 JS。我基本上是在尝试制作一个可以通过单击按钮传递颜色来更新的 Canvas 。

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>

最佳答案

您的演示可能无法正常工作,因为您在正文加载之前定义了阶段,并向其传递了 Canvas 的 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 元素之后的正文中定义脚本,以便它们在元素准备好后初始化。

请注意,您的 fiddle 中没有 createjs 库,并且 JSFiddle 将在 onload 事件期间触发 fiddle 的代码部分,因此您可能看不到本地遇到的问题。

关于javascript - Easel JS 的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35256458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com