Question

你好，我每次移动鼠标时都试图调用图像（重绘），但问题是图像移动鼠标时有时不一致地闪烁，这真的很烦人。

我试图从其他stackoverflow帖子中找到答案，但它们并不像我的那样安静。

我简化了我的代码，因此很容易理解。

事情是，每当移动鼠标时我都必须调用图像，因此它可以与我编写的其他代码一起使用。

我以这种方式编写代码的原因是，只要用户点击页面上的某个位置，就可以更改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';

}

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

使用mousemove调用javascript画布图像闪烁

2 个答案: