<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="" height="" style="background-color:#ccc;"></canvas>
<script src="../js/createjs/easeljs-NEXT.combined.js"></script>
<script>
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);//创建舞台(画布)
var shape2 = new createjs.Shape();
///
shape2.graphics.beginFill("pink").beginStroke("#fff").setStrokeStyle().moveTo(, ).lineTo(canvas.width, ).lineTo(canvas.width, canvas.height * .).lineTo(, canvas.height * .).closePath();
stage.addChild(shape2);
stage.update();
var img = new Image();
img.onload = function () {
var bmp = new createjs.Bitmap(this);
stage.addChild(bmp);
bmp.mask = shape2;
stage.update();
bmp.addEventListener("mousedown", function (e) {
var disX = e.stageX - bmp.x;
var disY = e.stageY - bmp.y;
document.onmousemove = function (e) {
bmp.x = e.clientX - disX;
bmp.y = e.clientY - disY;
stage.update();
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
}
img.src = "../img/10.jpg";
///
var shape3 = new createjs.Shape();
shape3.graphics.beginFill("yellow").beginStroke("#fff").setStrokeStyle().moveTo(, canvas.height * .).lineTo(canvas.width, canvas.height * .).lineTo(canvas.width,canvas.height).lineTo(,canvas.height).closePath();
stage.addChild(shape3);
stage.update();
var img2 = new Image();
img2.onload = function () {
var bmp = new createjs.Bitmap(this);
stage.addChild(bmp);
bmp.mask = shape3;
stage.update();
bmp.addEventListener("mousedown", function (e) {
var disX = e.stageX - bmp.x;
var disY = e.stageY - bmp.y;
document.onmousemove = function (e) {
bmp.x = e.clientX - disX;
bmp.y = e.clientY - disY;
stage.update();
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
};
img2.src = "../img/20.jpg"; //createjs.Ticker.addEventListener('tick', function (e) {
// img.x += 10;
// stage.update();
//});
</script>
</body>
</html>