-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Filters.html
executable file
·89 lines (73 loc) · 2.54 KB
/
Filters.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS Example: Filters test file.</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var img;
function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "../_assets/art/flowers.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).set({scaleX: 0.5, scaleY: 0.5});
stage.addChild(bmp);
var colorMatrix = new createjs.ColorMatrix();
colorMatrix.adjustSaturation(-100);
colorMatrix.adjustContrast(50);
var blackAndWhiteFilter = new createjs.ColorMatrixFilter(colorMatrix);
bmp = bmp.clone();
// filters are only displayed when the display object is cached
// later, you can call updateCache() to update changes to your filters
bmp.filters = [blackAndWhiteFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.x = 480;
stage.addChild(bmp);
var blurFilter = new createjs.BlurFilter(64, 0, 1);
bmp = bmp.clone();
bmp.filters = [blurFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.y = 200;
stage.addChild(bmp);
var removeRedFilter = new createjs.ColorFilter(0.25, 0.75, 1, 1); // red, green, blue, alpha
bmp = bmp.clone();
bmp.filters = [removeRedFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.x = 0;
stage.addChild(bmp);
var frame = new createjs.Shape();
frame.graphics.setStrokeStyle(10).beginStroke("#000")
.moveTo(480, 0).lineTo(480, 400)
.moveTo(0, 200).lineTo(960, 200);
frame.compositeOperation = "destination-out"; // punch the frame out.
stage.addChild(frame);
// draw to the canvas:
stage.update();
}
</script>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>Filters</h1>
<p>Demonstrates using filters. Top-left: original. Top-right: <code>ColorMatrixFilter</code>.
Bottom-left: <code>ColorFilter</code>. Bottom-right:
<code>BlurFilter</code>.</p>
</header>
<div>
<canvas id="testCanvas" width="960" height="400"
style="background:none;"></canvas>
</div>
</body>
</html>