Skip to content

Instantly share code, notes, and snippets.

@HAKASHUN

HAKASHUN/index.html

Created November 26, 2014 04:50
Show Gist options
  • Save HAKASHUN/ddf2eb2fb8d0070a9ec5 to your computer and use it in GitHub Desktop.
Save HAKASHUN/ddf2eb2fb8d0070a9ec5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<style id="jsbin-css">
#canvas {
background: gray;
}
#original {
width: 100px;
height: 100px;
background:#CCC;
display: block;
}
#original img {
padding: 20px 18px;
}
</style>
</head>
<body onload=init()>
<div id="original">
<img src="http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png">
</div>
<canvas id="canvas" width="100" height="100"></canvas>
<script id="jsbin-javascript">
var manifest = [
{
src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
id: "chara"
}
];
var canvas, images, stage;
/**
* DOMロード後
*/
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
/**
* 画像ロード完了後
*/
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
/**
* すべての画像ロード完了後
*/
function handleComplete() {
// create stage
stage = new createjs.Stage(canvas);
// メインのbitmap
// charaBitmap
var charaBitmap = new createjs.Bitmap(images.chara);
// charaDisplay
var chara = new createjs.Container();
chara.addChild(charaBitmap);
chara.x = 50 - chara.getBounds().width / 2;
chara.y = 50 - chara.getBounds().height / 2;
// 上にブレンドさせるbitmap
// brendCharaBitmap
var brendCharaBitmap = new createjs.Bitmap(images.chara);
// brendChara
var brendChara = new createjs.Container();
brendChara.addChild(brendCharaBitmap);
brendChara.x = chara.x;
brendChara.y = chara.y;
// compositeOperation指定
// http://dev.w3.org/fxtf/compositing-1/#propdef-mix
brendChara.compositeOperation = 'lighter';
// add canvas to exportRoot
var exportRoot = new createjs.MovieClip();
exportRoot.addChild(chara);
exportRoot.addChild(brendChara);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(12);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<script id="jsbin-source-css" type="text/css">#canvas {
background: gray;
}
#original {
width: 100px;
height: 100px;
background:#CCC;
display: block;
}
#original img {
padding: 20px 18px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var manifest = [
{
src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
id: "chara"
}
];
var canvas, images, stage;
/**
* DOMロード後
*/
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
/**
* 画像ロード完了後
*/
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
/**
* すべての画像ロード完了後
*/
function handleComplete() {
// create stage
stage = new createjs.Stage(canvas);
// メインのbitmap
// charaBitmap
var charaBitmap = new createjs.Bitmap(images.chara);
// charaDisplay
var chara = new createjs.Container();
chara.addChild(charaBitmap);
chara.x = 50 - chara.getBounds().width / 2;
chara.y = 50 - chara.getBounds().height / 2;
// 上にブレンドさせるbitmap
// brendCharaBitmap
var brendCharaBitmap = new createjs.Bitmap(images.chara);
// brendChara
var brendChara = new createjs.Container();
brendChara.addChild(brendCharaBitmap);
brendChara.x = chara.x;
brendChara.y = chara.y;
// compositeOperation指定
// http://dev.w3.org/fxtf/compositing-1/#propdef-mix
brendChara.compositeOperation = 'lighter';
// add canvas to exportRoot
var exportRoot = new createjs.MovieClip();
exportRoot.addChild(chara);
exportRoot.addChild(brendChara);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(12);
createjs.Ticker.addEventListener("tick", stage);
}</script></body>
</html>
Raw
jsbin.noqixi.css
#canvas {
background: gray;
}
#original {
width: 100px;
height: 100px;
background:#CCC;
display: block;
}
#original img {
padding: 20px 18px;
}
Raw
jsbin.noqixi.js
var manifest = [
{
src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
id: "chara"
}
];
var canvas, images, stage;
/**
* DOMロード後
*/
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
/**
* 画像ロード完了後
*/
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
/**
* すべての画像ロード完了後
*/
function handleComplete() {
// create stage
stage = new createjs.Stage(canvas);
// メインのbitmap
// charaBitmap
var charaBitmap = new createjs.Bitmap(images.chara);
// charaDisplay
var chara = new createjs.Container();
chara.addChild(charaBitmap);
chara.x = 50 - chara.getBounds().width / 2;
chara.y = 50 - chara.getBounds().height / 2;
// 上にブレンドさせるbitmap
// brendCharaBitmap
var brendCharaBitmap = new createjs.Bitmap(images.chara);
// brendChara
var brendChara = new createjs.Container();
brendChara.addChild(brendCharaBitmap);
brendChara.x = chara.x;
brendChara.y = chara.y;
// compositeOperation指定
// http://dev.w3.org/fxtf/compositing-1/#propdef-mix
brendChara.compositeOperation = 'lighter';
// add canvas to exportRoot
var exportRoot = new createjs.MovieClip();
exportRoot.addChild(chara);
exportRoot.addChild(brendChara);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(12);
createjs.Ticker.addEventListener("tick", stage);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment