-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
44 lines (34 loc) · 1.21 KB
/
main.js
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
import './style.css'
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width = window.outerWidth * 4;
let height = window.outerHeight * 4;
const ratio = 2684 / 1668;
width = height * ratio;
height = width / ratio;
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
const img1 = new Image();
const img2 = new Image();
img1.onload = function () {
ctx.drawImage(img1, 0, 0, width, height);
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(0, 0, width / 2, height);
ctx.drawImage(img2, width / 2, 0, width, height);
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(width / 2, 0, width / 2, height);
};
img1.src = 'text.png';
img2.src = 'text.png';
const slider = document.getElementById("slider");
slider.addEventListener("input", function () {
const sliderValue = parseInt(slider.value);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);
ctx.drawImage(img1, 0 - sliderValue, 0, width, height);
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(0, 0, width / 2, height);
ctx.drawImage(img2, (width / 2) + sliderValue, 0, width, height);
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(width / 2, 0, width / 2, height);
});