web-dev-qa-db-fra.com

Image d'arrière-plan HTML5 Canvas

J'essaie de placer une image d'arrière-plan au verso de ce script sur toile que j'ai trouvé. Je sais que cela a quelque chose à voir avec le style de contexte, mais je ne sais pas comment s'y prendre. J'aimerais que cette ligne se lise comme ceci:

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

Voici mon code actuel:

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
};
})();

Code révisé - pour le moment, le fond noir est affiché, pas une image:

// 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
};
})();

Vous pouvez voir le site sur lequel je travaille ici: http://www.samskirrow.com/client-kyra

html5canvashtml5-canvascomputer-science
35
Sam Skirrow

Il y a plusieurs façons de le faire. Vous pouvez soit ajouter un arrière-plan au canevas sur lequel vous travaillez actuellement, ce qui est correct si le canevas ne sera pas redessiné. Sinon, vous pouvez créer une seconde toile sous votre toile principale et y dessiner l’arrière-plan. La dernière méthode consiste simplement à utiliser un standard <img> élément placé sous la toile. Pour dessiner un arrière-plan sur l’élément de la toile, vous pouvez procéder comme suit:

démonstration en direct

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.
52
Loktar

Pourquoi ne vous dénommez pas:

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

Canvas n'utilise pas le fichier .png comme image d'arrière-plan. passer à d’autres extensions de fichiers comme gif ou jpg fonctionne bien.

3
Sathiesh