绘制同心圆
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginStroke("#000").setStrokeStyle(5).beginFill("red").drawCircle(0, 0, 50).beginFill("white").drawCircle(0, 0, 30)
.beginFill("0F0").drawCircle(0,0,15);
circle.x = 100;
circle.y = 100;
circle.onClick = function () {
alert("Click!");
}
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
Container
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// stage.mouseMoveOutside = true;
var background = new createjs.Shape();
background.name = "background";
// drawRoundRect ( x , y , w , h , radius )
background.graphics.beginFill("red").drawRoundRect(0, 0, 200, 60, 10);
var label = new createjs.Text("click me!", "bold 24px Arial", "#FFFFFF");
label.name = "label";
label.textAlign = "center";
label.textBaseline = "middle";
label.x = 200 / 2;
label.y = 60 / 2;
var button = new createjs.Container();
button.name = "button";
button.x = 50;
button.y = 25;
button.addChild(background, label);
stage.addChild(button);
background.onClick = label.onClick = handleClick;
// if we define a handler on button, then it will be called, but handlers
// on the children will not. You can comment out the next line to test:
button.onClick = handleClick;
createjs.Ticker.addListener(stage);
stage.update();
}
function handleClick(evt) {
alert("Clicked on: " + evt.target.name);
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
Drag
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// Canvas外面也能拖动
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.onPress = function (evt) {
var offset = { x: evt.target.x - evt.stageX, y: evt.target.y - evt.stageY };
evt.onMouseMove = function (ev) {
ev.target.x = ev.stageX + offset.x;
ev.target.y = ev.stageY + offset.y;
}
}
createjs.Ticker.addListener(stage);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
Event
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// to get onMouseOver & onMouseOut events, we need to enable them on the stage:
stage.enableMouseOver();
output = new createjs.Text("Test press, click, doubleclick, mouseover, and mouseout", "14px Arial");
output.x = output.y = 10;
stage.addChild(output);
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = circle.y = 100;
circle.name = "circle";
stage.addChild(circle);
var square = new createjs.Shape();
square.graphics.beginFill("green").drawRect(-50, -50, 100, 100);
square.x = 250;
square.y = 100;
square.name = "square";
stage.addChild(square);
// add a handler for all the events we're interested in:
circle.onClick = circle.onPress = circle.onDoubleClick = circle.onMouseOver = circle.onMouseOut = handleMouseEvent;
square.onClick = square.onPress = square.onDoubleClick = square.onMouseOver = square.onMouseOut = handleMouseEvent;
stage.update();
}
function handleMouseEvent(evt) {
output.text = "evt.target: " + evt.target + ", evt.type: " + evt.type;
// to save CPU, we're only updating when we need to, instead of on a tick:1
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
HitArea
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
stage.enableMouseOver();
var label1 = new createjs.Text("text without hitArea", "48px Arial", "#F00");
label1.x = label1.y = 10;
label1.alpha = 0.5;
var label2 = new createjs.Text("text with hitArea", "48px Arial", "#00F");
label2.x = 10;
label2.y = 80;
label2.alpha = 0.5;
// create a rectangle shape the same size as the text, and assign it as the hitArea
// note that it is never added to the display list.
// hitArea实现和Label1一样的效果
var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
label2.hitArea = hit;
label1.onMouseOver = label2.onMouseOver = function (evt) { evt.target.alpha = 1; }
label1.onMouseOut = label2.onMouseOut = function (evt) { evt.target.alpha = 0.5; }
stage.addChild(label1, label2);
createjs.Ticker.addListener(stage);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
Stage
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="easeljs-0.5.0.min.js"></script>
<script type="text/javascript">
var stage, label, shape, oldX, oldY, size, color;
function init() {
stage = new createjs.Stage("canvas1");
label = new createjs.Text("finger paint", "24px Arial");
label.x = label.y = 10;
shape = new createjs.Shape();
stage.addChild(shape, label);
// set up our defaults:
color = "#0FF";
size = 2;
// add handler for stage mouse events:
stage.onMouseDown = function () {
size = 10;
}
// 色调 饱和度 亮度
stage.onMouseUp = function () {
color = createjs.Graphics.getHSL(Math.random() * 255, 100, 50);
size = 2;
}
stage.onMouseMove = function (evt) {
if (oldX) {
shape.graphics.beginStroke(color)
.setStrokeStyle(size, "round")
.moveTo(oldX, oldY)
.lineTo(evt.stageX, evt.stageY);
stage.update();
}
oldX = evt.stageX;
oldY = evt.stageY;
}
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas1" width="500" height="200"></canvas>
</body>
</html>
OnTick
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, circle;
function init() {
stage = new createjs.Stage("demoCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
circle.y = 50;
stage.addChild(circle);
// Ticker will pass elapsedTime and paused params when it calls stage.update()
// which will pass them to onTick() handlers for us in time based animation.
circle.onTick = function (elapsedTime) {
this.x += elapsedTime / 1000 * 100;
if (this.x > stage.canvas.width) { this.x = 0; }
}
createjs.Ticker.addListener(stage);
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
Pausing
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, pauseCircle, goCircle, output;
function init() {
stage = new createjs.Stage("demoCanvas");
pauseCircle = new createjs.Shape();
pauseCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
pauseCircle.y = 50;
stage.addChild(pauseCircle);
goCircle = new createjs.Shape();
goCircle.graphics.beginFill("green").drawCircle(0, 0, 40);
goCircle.y = 150;
stage.addChild(goCircle);
// pauseCircle允许暂停
createjs.Ticker.addListener(function () {
pauseCircle.x += 10;
if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0; }
}, true);
// 全局不允许暂停
createjs.Ticker.addListener(window, false);
// UI code:
output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
output.lineHeight = 15;
output.textBaseline = "top";
output.x = 10;
output.y = stage.canvas.height - output.lineHeight * 3 - 10;
}
function tick() {
goCircle.x += 10;
if (goCircle.x > stage.canvas.width) { goCircle.x = 0; }
// 指定是否包含暂停时间
output.text = "getPaused() = " + createjs.Ticker.getPaused() + "\n" +
"getTime(true) = " + createjs.Ticker.getTime(true) + "\n" +
"getTime(false) = " + createjs.Ticker.getTime(false);
stage.update(); // important!!
}
function togglePause() {
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
document.getElementById("pauseBtn").value = paused ? "unpause" : "pause";
}
</script>
</head>
<body onLoad="init();">
<input type="button" value="pause" id="pauseBtn" onclick="togglePause();"><br>
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
设置频率
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border:1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, circle;
function init() {
stage = new createjs.Stage("demoCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
circle.y = 50;
stage.addChild(circle);
createjs.Ticker.addListener(window);
createjs.Ticker.setFPS(5);
}
function tick() {
circle.x = circle.x + 5;
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update(); // important!!
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
TimeBased
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border: 1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
var stage, timeCircle, tickCircle;
function init() {
stage = new createjs.Stage("demoCanvas");
timeCircle = new createjs.Shape();
timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
timeCircle.y = 50;
stage.addChild(timeCircle);
tickCircle = new createjs.Shape();
tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
tickCircle.y = 150;
stage.addChild(tickCircle);
createjs.Ticker.addListener(window);
createjs.Ticker.setFPS(20);
}
function tick(elapsedTime) {
// time based
timeCircle.x = timeCircle.x + elapsedTime / 1000 * 100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
// not time based:
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200">alternate content
</canvas>
</body>
</html>
绘制圆形
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<style type="text/css">
canvas {
border: 1px solid #ff6a00;
}
</style>
<script src="easeljs-0.5.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
//var circle = new createjs.Shape();
//circle.graphics.beginFill("red").drawCircle(0, 0, 50);
//circle.x = 100;
//circle.y = 100;
//stage.addChild(circle);
// 简写版本
stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f("red").dc(0,0,50);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200">alternate content
</canvas>
</body>
</html>
浙公网安备 33010602011771号