HTML5 Холст фонового изображения

Я пытаюсь разместить фоновое изображение на обратной стороне этого скрипта, который я нашел. Я знаю, что это как-то связано с context.fillstyle, но не уверен, как это сделать. Я хотел бы, чтобы эта строка читала что-то вроде этого:

context.fillStyle = "url('http://sofru.miximages.com/html5/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://sofru.miximages.com/html5/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 }; })(); 

Вы можете увидеть сайт, на котором я работаю здесь: http://www.samskirrow.com/client-kyra

Есть несколько способов сделать это. Вы можете либо добавить фон к canvasу, на котором вы сейчас работаете, что, если canvas не будет перерисовываться, каждый цикл будет прекрасен. В противном случае вы можете сделать второй canvas под своим основным canvasом и нарисовать фон. Последний способ – просто использовать стандартный элемент расположенный под canvasом. Чтобы нарисовать фон на элементе canvas, вы можете сделать что-то вроде следующего:

Демо-версия

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = 903; canvas.height = 657; var background = new Image(); background.src = "http://sofru.miximages.com/html5/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. 

Почему бы вам не разобраться:

  Your browser does not support the canvas element.  

Canvas не использует файл .png в качестве фонового изображения. переход на другие расширения файлов, такие как gif или jpg, отлично работает.

Interesting Posts

Учитывая строку, сгенерируйте регулярное выражение, которое может анализировать * похожие * строки

Как сделать VS Code для обработки других расширений файлов как определенного языка?

регистрировать приемник в службе

Поддерживает ли Google App Engine создание файлов и папок на сервере?

Зеркальные мониторы разного разрешения

Ограничение полосы пропускания, используемое Центром обновления Windows

Как найти аннотированные методы в данном пакете?

Как установить весь текст во всех слайдах на тот же шрифт?

Как получить текущий аромат в gradleле

Перемещение ресурсов в рамках WEB-INF

Почему атрибут «немедленного» был добавлен в EditableValueHolders?

Может ли вирус ввести через Ubuntu и повлиять на Windows при двойной загрузке?

База данных – Версии данных

hibernate на две группы на одну сущность

Почему ссылка, не связанная с константой, не может привязываться к временному объекту?

Давайте будем гением компьютера.