【发布时间】：2017-01-01 08:45:28
【问题描述】：
我正在尝试学习 JavaScript 和 html5 画布，但是，事实证明它有点令人困惑，我不明白为什么它似乎不起作用...
我正在创建一个简单的地图，它具有谷歌地图的一些功能（拖放/放大/缩小/等）。为了做到这一点，我选择了 html5 canvas 和 easeljs 来实现拖放功能。
我有一个包含 2 个函数的 javascript 文件 (path.js)：
pathConstructor() - 来自 easeljs 教程的示例函数
drawMap() - 第一个函数的副本稍作修改（现在可能是错误的）
当我从画布调用 pathConstructor() 时，一切正常，但是，在我用 drawMap() 替换它之后，一切都停止了。如果我现在用 pathContrcutor() 替换 drawMap() 甚至都行不通。
我在从画布调用函数之前和之后以及在 pathConstructor() 内部放置了一些警报。之前的警报会响起，但由于某种原因，其他警报不会响起，该函数永远不会被调用...
如果我在画布中使用 pathConstructor 代码作为内联代码，那么它工作得很好，但是，我想避免这种情况，因为我认为这是糟糕的编程。我希望它整洁，每个脚本都有自己的文件。
有人知道为什么会这样吗？
HTML
<!Doctype html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="path.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="1300px" height="800px"style="border:1px dotted black;">
<script>pathConstructor();</script>
</canvas>
</body>
</html>
Javascript
var stage;
function pathConstructor() {
alert('inside pathConstructor');
stage = new createjs.Stage('canvas');
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.on("pressmove", function(evt) {
// currentTarget will be the container that the event listener was added to:
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
// make sure to redraw the stage to show the change:
stage.update();
});
stage.update();
}
function drawMap() {
stage = new createjs.Stage('canvas');
var bitMap = new createjs.Bitmap('middle-earth-map.jpg');
stage.mouseMoveOutside = true;
var dragger = new createjs.Container();
dragger.x = dragger.y = 0;
dragger.addChild(bitMap);
stage.addChild(dragger);
dragger.on('pressmove', function(evt2)) {
evt2.currentTarget.x = evt2.stageX;
evt2.currentTarget.y = evt2.stageY;
stage.update();
});
stage.update();
}
【问题讨论】：
标签： javascript html canvas html5-canvas easeljs