BitmapData.js/blendmodes.html at master · garyZlot/BitmapData.js · GitHub

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
116
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Blendmodes Example</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/global.css" type="text/css" />
		<script type="text/javascript" src="js/Point.js"></script>
		<script type="text/javascript" src="js/Rectangle.js"></script>
		<script type="text/javascript" src="js/Matrix.js"></script>
		<script type="text/javascript" src="js/BitmapData.js"></script>
		<script>
			function init(){
				bmd = document.getElementById("canvas").bitmapData;
				log = document.getElementById("log");

				blendModeArray = [
					{mode: BlendMode.ADD, name: "BlendMode.ADD"},
					{mode: BlendMode.DARKEN, name: "BlendMode.DARKEN"},
					{mode: BlendMode.DIFFERENCE, name: "BlendMode.DIFFERENCE"},
					{mode: BlendMode.HARDLIGHT, name: "BlendMode.HARDLIGHT"},
					{mode: BlendMode.LIGHTEN, name: "BlendMode.LIGHTEN"},
					{mode: BlendMode.MULTIPLY, name: "BlendMode.MULTIPLY"},
					{mode: BlendMode.NORMAL, name: "BlendMode.NORMAL"},
					{mode: BlendMode.OVERLAY, name: "BlendMode.OVERLAY"},
					{mode: BlendMode.SCREEN, name: "BlendMode.SCREEN"},
					{mode: BlendMode.SUBTRACT, name: "BlendMode.SUBTRACT"}
				];

				bikes = new Image();
				bikes.src = "res/bikes.png";

				lenna = new Image();
				lenna.src = "res/lenna-300x300.png";

				counter = 0;
				function cycle() {
					bmd.draw(bikes);
					bmd.draw(lenna, null, null, blendModeArray[counter].mode);

					log.innerHTML = blendModeArray[counter].name;

					if(counter==blendModeArray.length-1) {
						counter = 0;
					} else {
						counter++;
					}
				}

				cycle();
				setInterval(cycle, 2000);
			};
		</script>
	</head>
	<body onload="init();">
		<div id="container">
			<div id="example-container">
				<div id="example">


					<canvas id="canvas" width="300" height="300"></canvas><br>
					<p><strong>Mode: <span id="log">Title</span></strong></p>
					<img id="bikes" src="res/bikes.png" width="150" height="150" />
					<img id="lenna" src="res/lenna-300x300.png" width="150" height="150" /><br>


				</div>
				<div id="code">
					<pre>bmd = document.getElementById("canvas").bitmapData;
log = document.getElementById("log");

blendModeArray = [
	{mode: BlendMode.ADD, name: "BlendMode.ADD"},
	{mode: BlendMode.DARKEN, name: "BlendMode.DARKEN"},
	{mode: BlendMode.DIFFERENCE, name: "BlendMode.DIFFERENCE"},
	{mode: BlendMode.HARDLIGHT, name: "BlendMode.HARDLIGHT"},
	{mode: BlendMode.LIGHTEN, name: "BlendMode.LIGHTEN"},
	{mode: BlendMode.MULTIPLY, name: "BlendMode.MULTIPLY"},
	{mode: BlendMode.NORMAL, name: "BlendMode.NORMAL"},
	{mode: BlendMode.OVERLAY, name: "BlendMode.OVERLAY"},
	{mode: BlendMode.SCREEN, name: "BlendMode.SCREEN"},
	{mode: BlendMode.SUBTRACT, name: "BlendMode.SUBTRACT"}
];

bikes = new Image();
bikes.src = "res/bikes.png";

lenna = new Image();
lenna.src = "res/lenna-300x300.png";

counter = 0;
function cycle() {
	bmd.draw(bikes);
	bmd.draw(lenna, null, null, blendModeArray[counter].mode);

	log.innerHTML = blendModeArray[counter].name;

	if(counter==blendModeArray.length-1) {
		counter = 0;
	} else {
		counter++;
	}
}

cycle();
setInterval(cycle, 2000);</pre>
				</div>
			</div>
			<div class="break"><img src="res/break.gif"></div>
			<div id="links">
				<ul>
					<li><a href="index.html">back</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>