JavaScriptライブラリEASELJSの第一眼映像(一)
5677 ワード
このチュートリアルは『LYNDA.COM.EASELJS.FIRST.LOOK』から
EASELJSはJavaScriptライブラリで、HTML 5で提供されるCanvasオブジェクトにグラフィック画像を描画し、インタラクティブインターフェースを提供します.easelJSの目的はFlashの代替品になることです.複雑なグラフィックUIを描画し、インタラクティブインターフェースを提供することができるため、プラグインを必要とせずにブラウザで実行できます.ダウンロード先:http://code.createjs.com/.
最も簡単な例は次のとおりです.
HTMLソース:
css:
通常のJavaScript:
easelJSを使用するとコードは以下の通りです.
入力の例:
ブラシの例:
残りのグラフィック操作:
これで、基本的なすべてのグラフィック操作が完了します.その他の詳細は、公式ドキュメントを参照してください.http://www.createjs.com/Docs/EaselJS/
Graphicsに関連するものはすべてここにあります.http://www.createjs.com/Docs/EaselJS/Graphics.html
EASELJSはJavaScriptライブラリで、HTML 5で提供されるCanvasオブジェクトにグラフィック画像を描画し、インタラクティブインターフェースを提供します.easelJSの目的はFlashの代替品になることです.複雑なグラフィックUIを描画し、インタラクティブインターフェースを提供することができるため、プラグインを必要とせずにブラウザで実行できます.ダウンロード先:http://code.createjs.com/.
最も簡単な例は次のとおりです.
HTMLソース:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easel JS Demo</title>
<link rel="stylesheet" type="text/css" href="_css/easeljs.css"/>
<script type="text/javascript" src="_js/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="_js/easeljs.js"></script>
</head>
<body onLoad="init()">
<canvas id="easel" width="480" height="320">
</canvas>
</body>
</html>
css:
/* CSS Document */
body{
background-color: #999
}
#easel{
background-color: #066;
display: block;
margin: 0 auto;
}
通常のJavaScript:
// JavaScript Document
function init() {
var canvas = document.getElementById("easel");
context = canvas.getContext("2d");
SIZE = 100;
centerX = canvas.width / 2;
centerY = canvas.height / 2;
rotation = 0;
setInterval(function() {
rotation += 8;
//
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(162, 216, 255)";
//
context.translate(centerX, centerY);
// 30 ，
// ， 0, 0
// ， centerX, centerY
context.rotate(rotation * Math.PI / 180);
context.fillRect(-SIZE / 2, -SIZE / 2, SIZE, SIZE);
//
context.restore();
if (rotation >= 360) rotation = 0;
}, 50);
}easelJSを使用するとコードは以下の通りです.
function init(){
SIZE = 100;
var canvas = document.getElementById("easel");
centerX = canvas.width / 2;
centerY = canvas.height / 2;
//
var shape = new createjs.Shape();
shape.graphics.beginFill("rgb(162, 216, 255)");
shape.graphics.drawRect(0, 0, SIZE, SIZE);
// ，
shape.x = centerX;
shape.y = centerY;
// ，
shape.regX = SIZE / 2;
shape.regY = SIZE / 2;
shape.rotation = 45;
//
createjs.Ticker.setFPS(30);
createjs.Ticker.addListener(function(){
//
shape.rotation += 8;
//
stage.update();
});
//
var stage = new createjs.Stage(canvas);
stage.addChild(shape);
stage.update();
}入力の例:
function init(){
var canvas = document.getElementById("easel");
//
var stage = new createjs.Stage(canvas);
//
var graphics = new createjs.Graphics();
// Shape
var shape = new createjs.Shape(graphics);
//
//graphics.beginFill("purple");
//graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0, .5));
//
//graphics.beginLinearGradientFill(["yellow", "red"], [0, 1], 50, 50, 150, 150);
graphics.beginRadialGradientFill(["yellow", "red"], [0, 1], 100, 100, 0, 100, 100, 100);
//
// rect/fillRect/drawRoundRect/drawCircle/drawEllipse/drawPolyStar
graphics.rect(50, 50, 100, 100);
stage.addChild(shape);
stage.update();
}ブラシの例:
function init(){
var canvas = document.getElementById("easel");
//
var stage = new createjs.Stage(canvas);
//
var graphics = new createjs.Graphics();
// Shape
var shape = new createjs.Shape(graphics);
//
//graphics.beginStroke("red");
//graphics.beginLinearGradientStroke(["red", "green"], [0, 1], 50, 50, 250, 250);
graphics.beginRadialGradientStroke(["red", "green"], [0, 1], 50, 250, 100, 50, 250, 250);
// thickness, caps, joints, miter
graphics.setStrokeStyle(10, 1, "round");
//
graphics.moveTo(50, 50);
graphics.quadraticCurveTo(50, 175, 250, 250);
graphics.lineTo(50, 250);
stage.addChild(shape);
stage.update();
}残りのグラフィック操作:
function init(){
var canvas = document.getElementById("easel");
//
var stage = new createjs.Stage(canvas);
//
var graphics = new createjs.Graphics();
// Shape
var shape = new createjs.Shape(graphics);
//
graphics.beginStroke("red");
graphics.setStrokeStyle(10, 1, 1);
//
//
//graphics.rect(50, 50, 250, 250);
//graphics.drawRoundRect(50, 50, 250, 250, 50);
//graphics.drawRoundRectComplex(50, 50, 250, 250, 50, 0, 50, 0);
//
//graphics.drawCircle(250, 250, 50);
//graphics.drawEllipse(100, 100, 250, 100);
//graphics.arc(100, 100, 50, 0, 90*(Math.PI/180), 1); // 0~90°, ,1
//
//graphics.drawPolyStar(250, 250, 100, 10, .5, 0);
//
//graphics.moveTo(50, 50).lineTo(250, 250).lineTo(50, 250).closePath();
//
graphics.s("purple").ss(10, 1, 1).mt(50, 50).lt(250, 250).lt(50, 250).cp();
stage.addChild(shape);
stage.update();
}これで、基本的なすべてのグラフィック操作が完了します.その他の詳細は、公式ドキュメントを参照してください.http://www.createjs.com/Docs/EaselJS/
Graphicsに関連するものはすべてここにあります.http://www.createjs.com/Docs/EaselJS/Graphics.html