我刚刚开始学习画架。我试图创建一个跟随鼠标坐标的矩形,但它不起作用。这里有什么问题以及如何修复它?
<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
function init(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
shape.graphics.beginFill('red').drawRect(300,200,40,40);
stage.addChild(shape);
createjs.Ticker.addEventListener("tick",tick);
function tick(event){
shape.x=stage.mouseX;
shape.y=stage.mouseY;
stage.update(event);
}
}
window.onload=init;
</script>
</body>
</html>
答案 0 :(得分:3)
您已将矩形的x和y分别设置为300和200,因此如果将其设置为0,则矩形将从正确的位置开始并按预期方式跟随鼠标。
shape.graphics.beginFill('red').drawRect(0,0,40,40);