javascript canvas image мерцает с вызовом mousemove

Question

Привет, я пытаюсь вызвать изображение (перерисовать) всякий раз, когда я двигаю мышью, , но проблема в изображении иногда непостоянно мерцает при перемещении мыши, и это действительно раздражает.

Я попытался найти ответы от других сообщений stackoverflow, но они не тихие, похожие на мои.

Я упростил свой код, чтобы его было легко понять.

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

Причина, по которой я написал код таким образом, заключается в том, что img.src может быть изменен всякий раз, когда пользователь нажимает на определенную позицию на странице.

Входя в подробности, он в основном передает объект с траекторией изображения, который меняет img.src, когда пользователь нажимает.

веб-страница постоянно меняется, поэтому необходимо mousemove.

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

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

canvas.onmousemove = mousemove; 

function mousemove(e){ 

    ctx.clearRect(0,0,canvas.width,canvas.height); 
    var img = new Image(); // Create new img element 
    img.addEventListener("load", function() { 

     ctx.drawImage(img,100,100,400,400); 
    }, false); 

    img.src = 'images/reception.jpg'; 

} 

Answer 1

jsFiddle: https://jsfiddle.net/efhf7oeo/1/

Javascript

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

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

var images = new Array(); 
var currentLocation = 0; 
var totalImages = 7; 

for (var i = 0; i < totalImages; i++) { 
    var img = new Image; 
    switch (i) { 
     case 0: 
      img.src = "http://img.pokemondb.net/sprites/black-white/normal/mewtwo.png"; 
      break; 
     case 1: 
      img.src = "http://img.pokemondb.net/sprites/black-white/normal/keldeo-ordinary.png"; 
      break; 
     case 2: 
      img.src = "http://img.pokemondb.net/sprites/black-white/normal/darkrai.png"; 
      break; 
     case 3: 
      img.src = "http://floatzel.net/pokemon/black-white/sprites/images/5.png"; 
      break; 
     case 4: 
      img.src = "http://vignette1.wikia.nocookie.net/capx/images/0/03/001.png/revision/latest?cb=20140322003659"; 
      break; 
     case 5: 
      img.src = "http://img.pokemondb.net/sprites/black-white/normal/absol.png"; 
      break; 
     case 6: 
      img.src = "http://img.pokemondb.net/sprites/black-white/normal/dewgong.png"; 
      break; 
     case 7: 
      img.src = "http://orig05.deviantart.net/e770/f/2013/008/c/6/froakie_by_baconboy914-d5qvrjo.gif"; 
      break; 
    } 

    images.push(img); 
} 

function mousemove(e) { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(images[Math.floor((Math.random() * (totalImages - 1)) + 1)], 100, 100, 400, 400); 
} 

canvas.onmousemove = mousemove; 

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

Answer 2

Я нашел решение, но я не уверен, почему это работает, и я не думаю, что его полное доказательство, но это то, что я сделал.

вместо этого

function mousemove(e){ 

    ctx.clearRect(0,0,canvas.width,canvas.height); 
    var img = new Image(); // Create new img element 
    img.addEventListener("load", function() { 

     ctx.drawImage(img,100,100,400,400); 
    }, false); 

    img.src = 'images/reception.jpg'; 

} 

вы положили img.src чуть более clearRect.

как это

img.src = 'images/reception.jpg'; 
ctx.clearRect(0,0,canvas.width,canvas.height);