html5 getImageData затем результаты putImageData в выцветания изображений

Question

Я новичок в html5 и мне было интересно, если кто-то может пролить некоторый свет на это:

<script type="text/javascript"> 
     window.onload = function() { 

      var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas 
      var context = canvas.getContext('2d'); 

      var image = new Image(); 
      image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image 
      image.onload = function() { context.drawImage(image, 0, 0); drawFrame(); }; 

      function drawFrame() { 

       window.requestAnimationFrame(drawFrame, canvas); 

       imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

       //Do something to some pixels here that persists over time 

       context.clearRect(0, 0, canvas.width, canvas.height); 

       context.putImageData(imageData, 0, 0); 
      }; 

     }; 
</script> 

По моему ограниченному знанию html5 этого код не должны делать ничего кроме постоянного отображения «изображения». Но вместо этого изображение довольно быстро горит почти до белого, что свидетельствует о том, что imageData немного меняется каждый раз, когда он либо считывается, либо записывается на холст ...

В принципе, я хотел, чтобы изображение исчезло, когда была указана мышь так что фоновое изображение отображается, когда мышь перемещается. Есть ли способ обойти это, или мне придется стать немного более творческим в этом процессе? Есть ли в любом случае я могу манипулировать «image» ImageData, а не получать его из холста каждый раз?

Заранее спасибо, я пробовал использовать jpg и png и загружать в DOM, а не через image.src, но все они имеют одинаковую проблему.

Использование новейшей технологии кГц.

Вот настройки для requestionAnimationFrame обрабатывать диапазон браузеров с неисправностью к SetTimeout:

(!window.requestAnimationFrame) 
{ 
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function (callback) { 
         return window.setTimeout(callback, 1000/60); 
        }); 
} 

Вот код для холста

<canvas id="canvas" width="682" height="111"></canvas> 

Это весь код для это.

Answer 1

putImageData() и getImageData() могут быть потерями. Там записка в the spec об этом:

В связи с потерями характера преобразования и из предварительно умноженных альфа значений цвета, пикселей, которые только что были установлены с помощью putImageData() может быть возвращены к эквивалентной getImageData() как разные значения.

Смотрите также этот родственный вопрос: Why does HTML Canvas getImageData() not return the exact same values that were just set?

Answer 2

requestAnimationFrame - экспериментальная функция (июнь 2012), которая использует доступ к кадрам по времени. Причина этого - избежать латентности анимаций. Предлагаю вам взглянуть на этот Moz article.

Answer 3

Я попытался также применить это к моей игре где им будет манипулировать выбранные пиксели, чтобы иметь эффект, но это не дает мне ожидаемый результат

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

информации прибудут изображения и сохранить

var img = context.getImageData(0,0, width, height) 
var imgdata = img.data 
var len = imgdata.length 

цикл ко всем данным и манипулировать информацией пикселя

var i = 0; 

for(i; i<leng; i++) { 
    var red = imgdata[i] 
    var green = imgadata[i+1] 
    var blue = imgdata[i+2] 
    var alpha = imgdata[i+3] 

    imgdata[i] = new value 
    imgdata[i+1] = new value 
    imgdata[i+2] = new value 
    imgdata[i+3] = new value 
} 

контекст.putImageData (IMG, 0,0)

затем создать кадр анимации, чтобы увидеть эффект