HTML5 画布背景图片

Question

我试图在我找到的这个画布脚本的背面放置一个背景图像。我知道这与 context.fillstyle 有关，但不知道如何去做。我希望那行能读到这样的内容：

context.fillStyle = "url('http://www.samskirrow.com/background.png')";

这是我当前的代码：

var waveform = (function() {

var req = new XMLHttpRequest();
req.open("GET", "js/jquery-1.6.4.min.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundmanager2.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundcloudplayer.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/raf.js", false);
req.send();
eval(req.responseText);

// soundcloud player setup

soundManager.usePolicyFile = true;
soundManager.url = 'http://www.samskirrow.com/client-kyra/js/';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.debugFlash = false;
soundManager.debugMode = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;
soundManager.usePeakData = true;
soundManager.useWaveformData = true;
soundManager.useEqData = true;

var clientID = "345ae40b30261fe4d9e6719f6e838dac";
var playlistUrl = "https://soundcloud.com/kyraofficial/sets/kyra-ft-cashtastic-good-love";

var waveLeft = [];
var waveRight = [];

// canvas animation setup
var canvas;
var context;

function init(c) {
    canvas = document.getElementById(c);
    context = canvas.getContext("2d");
    soundManager.onready(function() {
        initSound(clientID, playlistUrl);
    });
    aniloop();
}

function aniloop() {
    requestAnimFrame(aniloop);
    drawWave();
}

function drawWave() {
    
    var step = 10;
    var scale = 60;
    
    // clear
    context.fillStyle = "#ff19a7";
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    // left wave
    context.beginPath();
            
    for ( var i = 0; i < 256; i++) {
        
        var l = (i/(256-step)) * 1000;
        var t = (scale + waveLeft[i] * -scale);
        
        if (i == 0) {
        context.moveTo(l,t);
        } else {
        context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.
    }
    }
    
    context.stroke();


    // right wave
    context.beginPath();
    context.moveTo(0, 256);
    for ( var i = 0; i < 256; i++) {
        
        context.lineTo(4 * i, 255 + waveRight[i] * 128.);
    }
    context.lineWidth = 0.5;
    context.strokeStyle = "#000";
    context.stroke();
}

function updateWave(sound) {
    waveLeft = sound.waveformData.left;
}

return {
    init : init
};
})();

修改后的代码 - 目前只显示黑色作为背景，而不是图像：

// canvas animation setup
var backgroundImage = new Image(); 
backgroundImage.src = 'http://www.samskirrow.com/images/main-bg.jpg'; 
var canvas;
var context;

function init(c) {
    canvas = document.getElementById(c);
    context = canvas.getContext("2d");
    soundManager.onready(function() {
        initSound(clientID, playlistUrl);
    });
    aniloop();
}

function aniloop() {
    requestAnimFrame(aniloop);
    drawWave();
}

function drawWave() {
    
    var step = 10;
    var scale = 60;
    
    // clear
    context.drawImage(backgroundImage, 0, 0);
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    // left wave
    context.beginPath();
            
    for ( var i = 0; i < 256; i++) {
        
        var l = (i/(256-step)) * 1000;
        var t = (scale + waveLeft[i] * -scale);
        
        if (i == 0) {
        context.moveTo(l,t);
        } else {
        context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.
    }
    }
    
    context.stroke();


    // right wave
    context.beginPath();
    context.moveTo(0, 256);
    for ( var i = 0; i < 256; i++) {
        
        context.lineTo(4 * i, 255 + waveRight[i] * 128.);
    }
    context.lineWidth = 0.5;
    context.strokeStyle = "#ff19a7";
    context.stroke();
}

function updateWave(sound) {
    waveLeft = sound.waveformData.left;
}

return {
    init : init
};
})();

Answer 1

有几种方法可以做到这一点。您可以为当前正在处理的画布添加背景，如果不重新绘制画布，则每个循环都可以。否则，您可以在主画布下方制作第二个画布并为其绘制背景。最后一种方法是只使用放置在画布下的标准<img> 元素。要在画布元素上绘制背景，您可以执行以下操作：

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 903;
canvas.height = 657;


var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

// Draw whatever else over top of it on the canvas.

Answer 2

Canvas 不使用 .png 文件作为背景图像。更改为 gif 或 jpg 等其他文件扩展名也可以正常工作。

Answer 3

你为什么不把它设计出来：

<canvas id="canvas" width="800" height="600" style="background: url('./images/image.jpg')">
  Your browser does not support the canvas element.
</canvas>

Answer 4

确保万一您的图像不在 dom 中，并且您从本地目录或服务器获取它，您应该等待图像加载，然后在画布上绘制它。

类似的东西：

function drawBgImg() {
    let bgImg = new Image();
    bgImg.src = '/images/1.jpg';
    bgImg.onload = () => {
        gCtx.drawImage(bgImg, 0, 0, gElCanvas.width, gElCanvas.height);
    }
}