source for lucas.co
simplify variables & functions and do the ios dynamic viewport thing
border.js | 271 +++++++++++++++++++++++++++++---------------------------------
main.js | 2 +-
2 files changed, 127 insertions(+), 146 deletions(-)
diff --git a/border.js b/border.js
index fbf2fba..3650da6 100644
--- a/border.js
+++ b/border.js
@@ -1,130 +1,120 @@
-onStart();
-console.log("test");
-//
-//
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+const dpr = window.devicePixelRatio;
+canvas.id = "canvasBorder";
+document.body.appendChild(canvas);
+
+canvas.style.position = "fixed";
+canvas.style.top = "0";
+canvas.style.left = "0";
+canvas.style.zIndex = "999";
+canvas.style.display = "block";
+canvas.style.pointerEvents = "none";
+canvasUpdate();
+
+
//
-// const resizeObserver = new ResizeObserver(entries => {
- // for (let entry of entries) {
- // console.log(entry);
- // }
+
+ // console.log("test")
+ // setTimeout(function() {
+ // if (window.innerHeight != lastHeight) {
+ // lastH = window.innerHeight;
+ // console.log("test");
+ // canvasClear();
+ // canvasInit();
+ // }
+ // }, 100);
// })
-// resizeOberver.observe(document.documentElement);
-let lastHeight = window.innerHeight;
-window.addEventListener("scroll", function() {
- console.log("test")
- setTimeout(function() {
- if (window.innerHeight != lastHeight) {
- lastHeight = window.innerHeight;
- console.log("test");
- canvasClear();
- canvasInit();
- }
- }, 100);
+
+// let lastH = window.visualViewport ?
+ // window.visualViewport.height :
+ // window.innerHeight;
+// let lastW = Math.min(document.documentElement.clientWidth, window.innerWidth);
+
+window.addEventListener("resize", function() {
+ // setTimeout(function() {
+ // const newH = window.visualViewport ?
+ // window.visualViewport.height :
+ // window.innerHeight;
+ // console.log(lastH);
+ // console.log(newH);
+ // if (newH != lastH) {
+ // lastH = newH;
+ 2canvasUpdate();
+ // }, 100)
})
-function onStart() {
- const canvas = document.createElement("canvas");
- canvas.id = "borderCanvas";
- document.body.appendChild(canvas);
- canvasInit()
- makeBorderGrad();
- makeBorderStroke();
- reportWindowInformation();
-
- window.addEventListener("resize", function() {
- canvasClear();
- canvasInit();
- makeBorderGrad();
- makeBorderStroke();
- })
-}
//
-//
-//
-function canvasClear() {
- const canvas = document.getElementById("borderCanvas");
- const ctx = canvas.getContext("2d");
+
+function canvasUpdate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
-}
+
+ const viewportH = window.visualViewport ?
+ window.visualViewport.height :
+ window.innerHeight;
+ const viewportW = Math.min(document.documentElement.clientWidth, window.innerWidth);
+
+ canvas.style.height = viewportH;
+ canvas.style.width = viewportW;
+
+ canvas.height = Math.floor(viewportH * 1);
+ canvas.width = Math.floor(viewportW * 1);
-function canvasInit() {
- console.log("test");
- const canvas = document.getElementById("borderCanvas");
-
- // set size in css pixels
- const viewport_height = Math.min( document.documentElement.clientHeight, window.innerHeight );
- const viewport_width = Math.min( document.documentElement.clientWidth, window.innerWidth );
- canvas.style.height = viewport_height;
- canvas.style.width = viewport_width;
-
- // set actual size in memory
- const scale = window.devicePixelRatio;
- // const scale = 1;
- canvas.height = Math.floor(viewport_height);
- canvas.width = Math.floor(viewport_width);
-
- canvas.style.position = "fixed";
- canvas.style.top = "0";
- canvas.style.left = "0";
- canvas.style.zIndex = "999";
- canvas.style.display = "block";
- canvas.style.pointerEvents = "none";
+ makeBorderGrad();
+ makeBorderStroke();
+ // reportWindowInformation();
}
function convertEmToPx(em) {
- const font_size = parseFloat( window.getComputedStyle(document.body).fontSize );
- return em * font_size;
+ const fontSize = parseFloat( window.getComputedStyle(document.body).fontSize );
+ return em * fontSize;
}
function convertPxToEm(px) {
- const font_size = parseFloat( window.getComputedStyle(document.body).fontSize );
- return px / font_size;
+ const fontSize = parseFloat( window.getComputedStyle(document.body).fontSize );
+ return px / fontSize;
}
function makeBorderGrad() {
// init
- const canvas = document.getElementById("borderCanvas");
- const ctx = canvas.getContext("2d");
- const width = canvas.width;
- const height = canvas.height;
- const border_width = 50;
+ const w = canvas.width;
+ const h = canvas.height;
+ const borderW = 50;
// top
- let gradient = ctx.createLinearGradient(0, 0, 0, border_width);
- gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
- gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
- ctx.fillStyle = gradient;
- ctx.fillRect(0, 0, width, border_width);
+ let grad = ctx.createLinearGradient(0, 0, 0, borderW);
+ grad.addColorStop(0, "rgba(0, 0, 0, 1)");
+ grad.addColorStop(1, "rgba(0, 0, 0, 0)");
+ ctx.fillStyle = grad
+ ctx.fillRect(0, 0, w, borderW);
// bottom
- gradient = ctx.createLinearGradient(0, height - border_width, 0, height);
- gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
- gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
- ctx.fillStyle = gradient;
- ctx.fillRect(0, height - border_width, width, border_width);
+ grad = ctx.createLinearGradient(0, h - borderW, 0, h);
+ grad.addColorStop(0, "rgba(0, 0, 0, 0)");
+ grad.addColorStop(1, "rgba(0, 0, 0, 1)");
+ ctx.fillStyle = grad;
+ ctx.fillRect(0, h - borderW, w, borderW);
// left
- gradient = ctx.createLinearGradient(0, 0, border_width, 0);
- gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
- gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
- ctx.fillStyle = gradient;
- ctx.fillRect(0, 0, border_width, height);
+ grad = ctx.createLinearGradient(0, 0, borderW, 0);
+ grad.addColorStop(0, "rgba(0, 0, 0, 1)");
+ grad.addColorStop(1, "rgba(0, 0, 0, 0)");
+ ctx.fillStyle = grad;
+ ctx.fillRect(0, 0, borderW, h);
// right
- gradient = ctx.createLinearGradient(width - border_width, 0, width, 0);
- gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
- gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
- ctx.fillStyle = gradient;
- ctx.fillRect(width - border_width, 0, border_width, height);
+ grad = ctx.createLinearGradient(w - borderW, 0, w, 0);
+ grad.addColorStop(0, "rgba(0, 0, 0, 0)");
+ grad.addColorStop(1, "rgba(0, 0, 0, 1)");
+ ctx.fillStyle = grad;
+ ctx.fillRect(w - borderW, 0, borderW, h);
}
function makeBorderStroke() {
// init
- const canvas = document.getElementById("borderCanvas");
- const ctx = canvas.getContext("2d");
ctx.strokeStyle = "white";
ctx.lineWidth = convertEmToPx(0.05);
@@ -132,21 +122,21 @@ function makeBorderStroke() {
const margin = convertEmToPx(1);
const inset = convertEmToPx(5);
- const border_width = (canvas.width - (margin * 2) - inset);
- const border_height = (canvas.height - (margin * 2) - inset);
+ const borderW = (canvas.width - (margin * 2) - inset);
+ const borderH = (canvas.height - (margin * 2) - inset);
- const stroke_ct_x = Math.floor(border_width / 40);
- const stroke_ct_y = Math.floor(border_height / 40);
- const stroke_len_x = border_width / ((stroke_ct_x + 1) / 2);
- const stroke_len_y = border_height / ((stroke_ct_y + 1) / 2);
- const stroke_width = convertEmToPx(0.5);
+ const strokeCtX = Math.floor(borderW / 40);
+ const strokeCtY = Math.floor(borderH / 40);
+ const strokeLenX = borderW / ((strokeCtX + 1) / 2);
+ const strokeLenY = borderH / ((strokeCtY + 1) / 2);
+ const strokeW = convertEmToPx(0.5);
// test
- // const gradient = ctx.createLinearGradient(60, 10, 20, 10);
- // gradient.addColorStop(0, "white");
- // gradient.addColorStop(1, "black");
- // ctx.strokeStyle = gradient;
+ // const grad = ctx.createLinearGradient(60, 10, 20, 10);
+ // grad.addColorStop(0, "white");
+ // grad.addColorStop(1, "black");
+ // ctx.strokeStyle = grad;
// ctx.lineWidth = 5;
// ctx.beginPath();
// ctx.moveTo(300, 300);
@@ -158,53 +148,45 @@ function makeBorderStroke() {
let x = margin + inset / 2;
let y = margin;
ctx.beginPath();
- for (let i = 0; i < stroke_ct_x; i++) {
+ for (let i = 0; i < strokeCtX; i++) {
ctx.moveTo(x, y);
- x += stroke_len_x * 0.4
+ x += strokeLenX * 0.4
ctx.lineTo(x, y);
- x += stroke_len_x * 0.2;
- y += stroke_width;
+ x += strokeLenX * 0.2;
+ y += strokeW;
ctx.lineTo(x, y);
- x += stroke_len_x * 0.4;
+ x += strokeLenX * 0.4;
ctx.lineTo(x, y);
- x -= stroke_len_x * 0.5;
- y -= stroke_width;
+ x -= strokeLenX * 0.5;
+ y -= strokeW;
}
ctx.stroke();
- // ctx.strokeStyle = gradient;
- // ctx.beginPath();
- // ctx.lineWidth = convertEmToPx(0.05);
- // ctx.moveTo(margin + inset / 2, margin);
- // ctx.lineTo(margin + inset / 2 - 40, margin);
- // ctx.stroke();
- // ctx.strokeStyle = "white";
-
// draw bottom
x = canvas.width - margin - inset / 2;
y = canvas.height - margin;
ctx.beginPath();
- for (let i = 0; i < stroke_ct_x; i++) {
+ for (let i = 0; i < strokeCtX; i++) {
ctx.moveTo(x, y);
- x -= stroke_len_x * 0.4;
+ x -= strokeLenX * 0.4;
ctx.lineTo(x, y);
- x -= stroke_len_x * 0.2;
- y -= stroke_width;
+ x -= strokeLenX * 0.2;
+ y -= strokeW;
ctx.lineTo(x, y);
- x -= stroke_len_x * 0.4;
+ x -= strokeLenX * 0.4;
ctx.lineTo(x, y);
- x += stroke_len_x * 0.5;
- y += stroke_width;
+ x += strokeLenX * 0.5;
+ y += strokeW;
}
ctx.stroke();
@@ -212,22 +194,22 @@ function makeBorderStroke() {
x = margin;
y = canvas.height - margin - inset / 2;
ctx.beginPath();
- for (let i = 0; i < stroke_ct_y; i++) {
+ for (let i = 0; i < strokeCtY; i++) {
ctx.moveTo(x, y);
- y -= stroke_len_y * 0.4;
+ y -= strokeLenY * 0.4;
ctx.lineTo(x, y);
- x += stroke_width;
- y -= stroke_len_y * 0.2;
+ x += strokeW;
+ y -= strokeLenY * 0.2;
ctx.lineTo(x, y);
- y -= stroke_len_y * 0.4;
+ y -= strokeLenY * 0.4;
ctx.lineTo(x, y);
- x -= stroke_width;
- y += stroke_len_y * 0.5;
+ x -= strokeW;
+ y += strokeLenY * 0.5;
}
ctx.stroke()
@@ -235,22 +217,22 @@ function makeBorderStroke() {
x = canvas.width - margin;
y = margin + inset / 2;
ctx.beginPath();
- for (let i = 0; i < stroke_ct_y; i++) {
+ for (let i = 0; i < strokeCtY; i++) {
ctx.moveTo(x, y);
- y += stroke_len_y * 0.4;
+ y += strokeLenY * 0.4;
ctx.lineTo(x, y);
- x -= stroke_width;
- y += stroke_len_y * 0.2;
+ x -= strokeW;
+ y += strokeLenY * 0.2;
ctx.lineTo(x, y);
- y += stroke_len_y * 0.4;
+ y += strokeLenY * 0.4;
ctx.lineTo(x, y);
- x += stroke_width;
- y -= stroke_len_y * 0.5;
+ x += strokeW;
+ y -= strokeLenY * 0.5;
}
ctx.stroke();
@@ -264,10 +246,9 @@ function reportWindowInformation() {
console.log("window.devicePixelRatio", window.devicePixelRatio);
console.log("em size", convertEmToPx(1));
- const canvas = document.getElementById("borderCanvas");
console.log("canvas.height", canvas.height);
console.log("canvas.width", canvas.width);
- console.log("canvas.offsetHeight", canvas.offsetHeight);
- console.log("canvas.offsetWidth", canvas.offsetWidth);
+ // console.log("canvas.offsetHeight", canvas.offsetHeight);
+ // console.log("canvas.offsetWidth", canvas.offsetWidth);
}
diff --git a/main.js b/main.js
index 14d591a..e82c139 100644
--- a/main.js
+++ b/main.js
@@ -2,5 +2,5 @@ loadBorder();
async function loadBorder() {
const module = await import("./border.js");
- // module.onStart();
+ module.onStart();
}