Javascript canvas 调用 mousemove 时图像闪烁
Javascript canvas image flickers with mousemove call
每当我移动鼠标时,我都在尝试调用图像(重绘),
但问题是移动鼠标时图像有时会不一致地闪烁,这真的很烦人。
我试图从其他 Stack Overflow 帖子中找到答案,但它们与我的不太相似。
我简化了代码,使其易于理解。
问题是每当鼠标移动时我都必须调用图像,以便它可以与我编写的其他代码一起使用。
我这样写代码的原因是,只要用户点击页面上的某个位置,img.src 就可以改变。
进入更详细的细节,它基本上传递带有图像路径的对象,当用户点击时,图像路径会改变 img.src。
网页不断变化,所以鼠标移动是必要的。
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';
}
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 中进行了测试,对我来说效果很好
我找到了一个解决方案,但我不确定它为什么有效,我不认为它是完整的证据,但这就是我所做的。
而不是这个
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);
每当我移动鼠标时,我都在尝试调用图像(重绘), 但问题是移动鼠标时图像有时会不一致地闪烁,这真的很烦人。
我试图从其他 Stack Overflow 帖子中找到答案,但它们与我的不太相似。
我简化了代码,使其易于理解。
问题是每当鼠标移动时我都必须调用图像,以便它可以与我编写的其他代码一起使用。
我这样写代码的原因是,只要用户点击页面上的某个位置,img.src 就可以改变。
进入更详细的细节,它基本上传递带有图像路径的对象,当用户点击时,图像路径会改变 img.src。
网页不断变化,所以鼠标移动是必要的。
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';
}
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 中进行了测试,对我来说效果很好
我找到了一个解决方案,但我不确定它为什么有效,我不认为它是完整的证据,但这就是我所做的。
而不是这个
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);