Skip to content
This repository
file 116 lines (96 sloc) 4.95 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Filters test file.</title>

<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

<!-- Note: All core EaselJS classes are listed here: -->
<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

<script type="text/javascript" src="../src/easeljs/filters/BlurFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->

<script>
var img;

function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "assets/photo.jpg";
}

function handleImageLoad() {
//find canvas and load images, wait for last image to load
var canvas = document.getElementById("testCanvas");

// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);

var bmp = new createjs.Bitmap(img);
bmp.x = (canvas.width-2*img.width)/3;
bmp.y = (canvas.height-2*img.height)/3;
stage.addChild(bmp);


var blurFilter = new createjs.BlurFilter(32, 16, 2);
bmp = bmp.clone();
bmp.filters = [blurFilter];
// filters are only displayed when the display object is cached
// later, you can call updateCache() to update changes to your filters
bmp.cache(0,0,img.width,img.height);
bmp.x += bmp.x+img.width;
stage.addChild(bmp);


var greyScaleFilter = new createjs.ColorMatrixFilter([
0.33,0.33,0.33,0,0, // red
0.33,0.33,0.33,0,0, // green
0.33,0.33,0.33,0,0, // blue
0,0,0,1,0 // alpha
]);
bmp = bmp.clone();
bmp.filters = [greyScaleFilter];
bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
bmp.y += bmp.y+img.height;
stage.addChild(bmp);


var removeRedFilter = new createjs.ColorFilter(0,1,1,1); // red, green, blue, alpha
bmp = bmp.clone();
bmp.filters = [removeRedFilter];
bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
bmp.x = (canvas.width-2*img.width)/3;
stage.addChild(bmp);

// draw to the canvas:
stage.update();
}

</script>
</head>

<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Filters</h1>
<p>Demonstrates using filters. Top-left: original. Top-right: <strong>BlurFilter</strong>. Bottom-left: <strong>ColorFilter</strong>. Bottom-right: <strong>ColorMatrixFilter</strong>.</p>
</header>

<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
Something went wrong with that request. Please try again.