null and exception handling
parent
cbb4a92899
commit
1ac8e4197c
|
@ -279,12 +279,18 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
|||
// Set up the canvas when the DOM loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const canvas = document.getElementById('matrix-animation');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found');
|
||||
return;
|
||||
}
|
||||
const ctx = (canvas as HTMLCanvasElement).getContext('2d');
|
||||
|
||||
// Set canvas dimensions to match the viewport
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
if (canvas) {
|
||||
(canvas as HTMLCanvasElement).width = window.innerWidth;
|
||||
(canvas as HTMLCanvasElement).height = window.innerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
|
@ -293,10 +299,10 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
|||
// Characters to display
|
||||
const chars = "SILICONPIN HOSTINNG";
|
||||
const charSize = 14;
|
||||
const columns = canvas.width / charSize;
|
||||
const columns = (canvas as HTMLCanvasElement).width / charSize;
|
||||
|
||||
// Array to track the y position of each column
|
||||
const drops = [];
|
||||
const drops: number[] = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
drops[i] = Math.random() * -100;
|
||||
}
|
||||
|
@ -304,8 +310,14 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
|||
// Draw function
|
||||
function draw() {
|
||||
// Semi-transparent black to create trail effect
|
||||
if (!ctx) {
|
||||
console.error('Canvas rendering context is null');
|
||||
return;
|
||||
}
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (canvas) {
|
||||
ctx.fillRect(0, 0, (canvas as HTMLCanvasElement).width, (canvas as HTMLCanvasElement).height);
|
||||
}
|
||||
|
||||
// Set text color
|
||||
ctx.fillStyle = "#6d9e37";
|
||||
|
@ -329,7 +341,7 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
|
|||
drops[i]++;
|
||||
|
||||
// Randomly reset a column when it's past the screen
|
||||
if (drops[i] * charSize > canvas.height && Math.random() > 0.975) {
|
||||
if (canvas && drops[i] * charSize > (canvas as HTMLCanvasElement).height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue