Skip to content

Commit 419c0ea

Browse files
EntityPlanttEntityPlantt
committed
v4
- Added description and credits in Canvas2d.js and Canvas2d.mod.js - Added Canvas2d.mod.js - Added Canvas2d.Parallax - Updated docs for Canvas2d.Parallax - Added an example for Canvas2d.Parallax
1 parent 2fcd2a8 commit 419c0ea

File tree

5 files changed

+146
-1
lines changed

5 files changed

+146
-1
lines changed

‎Canvas2d.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
/**
2+
*
3+
* @author EntityPlantt
4+
* @description A JavaScript API for better access to the HTML canvas
5+
* @version 4
6+
* @type Plain JS for Browser
7+
* @license Custom
8+
* @perms Use everywhere, even for commerical uses,
9+
* except don't re-distribuite the code without
10+
* granted permission to do that.
11+
*
12+
**/
113
var Canvas2d = new Object;
214
Canvas2d.Scene = class {
315
assets = new Array;
@@ -120,4 +132,35 @@ Canvas2d.RectAsset = class extends Canvas2d.Asset {
120132
ctx[this.stroke ? "strokeRect" : "fillRect"](this.width / -2, this.height / -2, this.width, this.height);
121133
ctx.restore();
122134
}
123-
}
135+
}
136+
Canvas2d.Parallax = class extends Canvas2d.Asset {
137+
constructor(image = document.createElement("img"), resizeBy = "none") {
138+
super();
139+
this.image = image;
140+
this.resizeBy = resizeBy;
141+
}
142+
x = 0; y = 0;
143+
draw() {
144+
var width = parseFloat(this.image.width),
145+
height = parseFloat(this.image.height);
146+
var resizeScale;
147+
switch (this.resizeBy) {
148+
case "height":
149+
resizeScale = this.parent.height / height;
150+
break;
151+
case "width":
152+
resizeScale = this.parent.width / width;
153+
break;
154+
default:
155+
resizeScale = 1;
156+
}
157+
width *= resizeScale;
158+
height *= resizeScale;
159+
var ctx = this.parent.context;
160+
for (var i = -1; i - 1 <= this.parent.width / width; i++) {
161+
for (var j = -1; j - 1 <= this.parent.height / height; j++){
162+
ctx.drawImage(this.image, -(this.x % width) + i * width, -(this.y % height) + j * height, width, height);
163+
}
164+
}
165+
}
166+
};

‎Canvas2d.mod.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
/**
2+
*
3+
* @author EntityPlantt
4+
* @description A JavaScript API for better access to the HTML canvas
5+
* @version 4
6+
* @type Plain JS module for Browser
7+
* @license Custom
8+
* @perms Use everywhere, even for commerical uses,
9+
* except don't re-distribuite the code without
10+
* granted permission to do that.
11+
*
12+
**/
113
var Canvas2d = new Object;
214
Canvas2d.Scene = class {
315
assets = new Array;
@@ -121,4 +133,35 @@ Canvas2d.RectAsset = class extends Canvas2d.Asset {
121133
ctx.restore();
122134
}
123135
}
136+
Canvas2d.Parallax = class extends Canvas2d.Asset {
137+
constructor(image = document.createElement("img"), resizeBy = "none") {
138+
super();
139+
this.image = image;
140+
this.resizeBy = resizeBy;
141+
}
142+
x = 0; y = 0;
143+
draw() {
144+
var width = parseFloat(this.image.width),
145+
height = parseFloat(this.image.height);
146+
var resizeScale;
147+
switch (this.resizeBy) {
148+
case "height":
149+
resizeScale = this.parent.height / height;
150+
break;
151+
case "width":
152+
resizeScale = this.parent.width / width;
153+
break;
154+
default:
155+
resizeScale = 1;
156+
}
157+
width *= resizeScale;
158+
height *= resizeScale;
159+
var ctx = this.parent.context;
160+
for (var i = -1; i - 1 <= this.parent.width / width; i++) {
161+
for (var j = -1; j - 1 <= this.parent.height / height; j++){
162+
ctx.drawImage(this.image, -(this.x % width) + i * width, -(this.y % height) + j * height, width, height);
163+
}
164+
}
165+
}
166+
};
124167
export {Canvas2d as default};

‎docs/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,22 @@ <h2>posFromCenter<span>: Boolean</span></h2>
208208
<p>If true, the <a href="#Canvas2d.RectAsset.x">X</a> and <a href="#Canvas2d.RectAsset.y">Y</a> will be the coordinates of the rectangle center. Defaults to <code>false</code>.</p>
209209
<h2>draw <span>(): undefined</span></h2>
210210
<p>Draws the rectangle on the canvas. Called from <a href="#Canvas2d.Scene.draw">Canvas2d.Scene.draw</a>.</p>
211+
212+
<!-- Canvas2d.Parallax -->
213+
<h1>Canvas2d.Parallax</h1>
214+
<p>Adds a parallax effect image in the canvas stretching through the whole one.<br>Extends: <a href="#Canvas2d.Asset">Canvas2d.Asset</a></p>
215+
<h2>constructor <span>(?image: Image, ?resizeBy: String)</span></h2>
216+
<p>Creates a new Canvas2d.Parallax object.<br><span>image:</span> The repeating image. Defaults to <code>document.createElement("img")</code>.<br><span>resizeBy:</span> How to resize the image. Enumerator, defaults to <code>"none"</code>. <a href="#Canvas2d.Parallax.resizeBy">See more here.</a></p>
217+
<h2>x<span>: Number</span></h2>
218+
<p>The parallax X movement. Defaults to 0.</p>
219+
<h2>y<span>: Number</span></h2>
220+
<p>The parallax Y movement. Defaults to 0.</p>
221+
<h2>image<span>: Image</span></h2>
222+
<p>The parralax repeating image. Initialized in <a href="#Canvas2d.Parallax.constructor">the constructor</a>.</p>
223+
<h2>resizeBy<span>: String</span></h2>
224+
<p>How to resize the image. Initialized in <a href="#Canvas2d.Parallax.constructor">the constructor</a>.<br>It can be one of these three values:<br><code>"width"</code>: Resize the image to be the same width as <a href="#Canvas2d.Scene.width">the canvas width</a>.<br><code>"height"</code>: Resize the image to be the same height as <a href="#Canvas2d.Scene.height">the canvas height</a>.<br><code>"none"</code>: Don't resize the image, keep its original form. Useful when making tiled images.</p>
225+
<h2>draw <span>(): undefined</span></h2>
226+
<p>Draws the parallax on the canvas. Called from <a href="#Canvas2d.Scene.draw">Canvas2d.Scene.draw</a>.</p>
211227
</div>
212228
</body>
213229
</html>

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<li><a href="..">Back</a></li>
2020
<li><a href="#hi">Docs first example</a></li>
2121
<li><a href="#thesun">The Sun</a></li>
22+
<li><a href="#parallax">Parallax Effect</a></li>
2223
</ul>
2324
</div>
2425
<iframe id="main"></iframe>

‎examples/parallax.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<style type="text/css">
7+
body, html, #main {
8+
margin: 0;
9+
width: 100%;
10+
height: 100%;
11+
border: none;
12+
}
13+
</style>
14+
<script type="text/javascript" src="../Canvas2d.js"></script>
15+
<script type="text/javascript">
16+
onload = async() => {
17+
window.scene = new Canvas2d.Scene(document.getElementById("my-canvas"));
18+
window.image = document.createElement("img");
19+
await new Promise(res => {
20+
image.onload = res;
21+
image.src = "https://thumbs.dreamstime.com/b/seamless-fantasy-landscape-vector-game-background-separated-layers-parallax-effect-illustration-your-design-78666286.jpg";
22+
});
23+
window.parallax = new Canvas2d.Parallax(image);
24+
scene.add(parallax);
25+
onmousemove = e => {
26+
parallax.x = e.clientX / 2;
27+
parallax.y = e.clientY / 2;
28+
}
29+
window.frame = () => {
30+
requestAnimationFrame(frame);
31+
scene.width = innerWidth;
32+
scene.height = innerHeight;
33+
scene.draw();
34+
}
35+
frame();
36+
}
37+
</script>
38+
</head>
39+
<body>
40+
<canvas id="my-canvas"></canvas>
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)