如何在 canvas 上疊加圖像

Question

我有一個 canvas 顯示矩陣二進制代碼下雨。 我想在有問題的 canvas 上添加一張圖片

這就是我所擁有的

<div class="rain">
            <canvas id="Matrix"></canvas>
             <div class ="imgclass">
                <img class="imgclass" src="assets/image.jpg"/>
            </div>
        </div>

JavaScript 為 canvas

const canvas = document.getElementById('Matrix');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';

const alphabet = latin + nums;

const fontSize = 16;
const columns = canvas.width/fontSize;

const rainDrops = [];

for( let x = 0; x < columns; x++ ) {
    rainDrops[x] = 1;
}

const draw = () => {
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    context.fillStyle = '#0F0';
    context.font = fontSize + 'px monospace';

    for(let i = 0; i < rainDrops.length; i++)
    {
        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
        context.fillText(text, i*fontSize, rainDrops[i]*fontSize);
        
        if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
            rainDrops[i] = 0;
        }
        rainDrops[i]++;
    }
};

setInterval(draw, 30);

和 CSS：

.rain {
    background: black;
    height: 40%;
    overflow: hidden;
}

canvas {
    background-image: url("assets/img.jpg");
}

現在，有問題的圖像出現在 canvas 下方，而不是 canvas（即中間）。

Answer 1

您只需將 canvas 包裝在一個 div 中並將 div 背景設置為您的圖像。

在這里，我將我的 CRT 效果應用到您的 canvas。

 const canvas = document.getElementById('Matrix'); const context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const nums = '0123456789'; const alphabet = latin + nums; const fontSize = 16; const columns = canvas.width / fontSize; const rainDrops = []; for (let x = 0; x < columns; x++) { rainDrops[x] = 1; } const draw = () => { context.fillStyle = 'rgba(0, 0, 0, 0.05)'; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#0F0'; context.font = fontSize + 'px monospace'; for (let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); context.fillText(text, i * fontSize, rainDrops[i] * fontSize); if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) { rainDrops[i] = 0; } rainDrops[i]++; } }; setInterval(draw, 30);

 @keyframes flicker { 50% { top: -3px; } }.crt::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; display: block; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAYAAADkOT91AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAqSURBVBhXYxTiF68WZ2TQeqLE8o3hicEbJgY0gFNgHRBvBuK9hLQwMAAAF54HHx1Goh0AAAAASUVORK5CYII="); background-size: 4px, 6px; opacity: 0.9; background-repeat: repeat; image-rendering: optimizeSpeed; pointer-events: none; filter: contrast(50%); animation: flicker 0.08s step-end infinite; } html, body { margin: 0; padding: 0; overflow: hidden; }

 <div class="crt"> <canvas id="Matrix"></canvas> </div>