在鼠标悬停上更改画布绘制图像

我真的很苦恼画布绘制图像的变化，所以我想我会看看是否有人可以在这里协助我或提供建议。在鼠标悬停上更改画布绘制图像

我在画布上绘制了一个静态标志，而且我还绘制了一个挥动的旗帜。我试图让这个标志在mouseover上挥动。

我最初认为我将不得不创建两个单独的文件，一个用于静态，另一个用于挥动方面。然后使用window.location = canvas.toDataURL（“image /”）;将它们中的每一个保存为jpg/gif图像。

但我刚刚发现，你可以显然通过jquery/hover在同一个文件中完成这一切。这似乎更简单和更有效的方式。

下面是飘扬的旗帜代码：

window.onload = function(){ 
    var flag = document.getElementById('banglaFlag'); 
    banglaStatic(flag, 320); 
    var timer = banglaWave(flag, 30, 15, 200, 200); 
}; 

function banglaStatic(canvas, width){ 
//Drawing the Bangladesh flag. 

    //Declaring variables that regard width and height of the canvas. 
    //Variables C to L are needed for the waving function. 
    var a = width/1.9; 
    var b = 200; 
    var c = 7*a/13; 
    var l = a/13; 
    canvas.width = b; 
    canvas.height = a; 
    var ctx = canvas.getContext('2d'); 
    var radius = 45; 




}; 

function banglaWave(canvas, wavelength, amplitude, period, shading){ 

    var fps = 30; 
    var ctx = canvas.getContext('2d'); 
    var w = canvas.width, h = canvas.height; 
    var od = ctx.getImageData(0,0,w,h).data; 
    // var ct = 0, st=new Date; 
    return setInterval(function(){ 
     var id = ctx.getImageData(0,0,w,h); 
     var d = id.data; 
     var now = (new Date)/period; 
     for (var y=0;y<h;++y){ 
      var lastO=0,shade=0; 
      for (var x=0;x<w;++x){ 
       var px = (y*w + x)*4; 
       var o = Math.sin(x/wavelength-now)*amplitude*x/w; 
       var opx = ((y+o<<0)*w + x)*4; 
       shade = (o-lastO)*shading; 
       d[px ] = od[opx ]+shade; 
       d[px+1] = od[opx+1]+shade; 
       d[px+2] = od[opx+2]+shade; 
       d[px+3] = od[opx+3]; 
       lastO = o; 
      } 
     } 
     ctx.putImageData(id,0,0); 
     // if ((++ct)%100 == 0) console.log(1000 * ct/(new Date - st)); 
    },1000/fps); 
}

预先感谢任何建议/援助。

来源

2013-12-20 user3112518

我不确定你的问题在哪里。我没有看到任何事件处理代码，所以我认为这是你的问题：

定义一个函数来“处理鼠标事件”。例如，如果你想要当用户在其移动鼠标移动的标志，定义是这样的：

function mouseMove(event) { 
    var mouseX, 
     mouseY; 
    event.preventDefault(); // stops browser to do what it normally does 
    // determine where mouse is 
    mouseX = event.pageX; 
    mouseY = event.pageY; 
    // do something useful, e.g. change the flag to waving when mouse is over flag 
}

然后，注册这个函数被调用当鼠标移动：

canvas.addEventListener("mousemove", mouseMove, false);

canvas是您绘制旗帜的画布，"mousemove"是事件的名称（存在更多，例如“mousedown”，“mouseup”，“mouseout”（离开画布），“mousewheel”等），mouseMove你的函数的名称（事件处理程序，因为它被称为）。

事件与浏览器和浏览器（甚至是浏览器版本）有一些不同，所以如果你需要在浏览器中使用它，你可能需要实现不同的事件处理程序。

希望这有助于...

来源

2013-12-20 15:01:57 virtualnobi

banglaWave函数会在mouseX = event.page.X后面出现吗？ moustY = event.pageY？对不起，这是我第一次完成这个任务。你可以让我看看JSfiddle吗？ – user3112518

听起来像一些基础工作...... :-)我想最好的办法如下：（1）你需要一个循环来重新创建你的画布，使用'requestAnimationFrame'。这个函数会执行你自己的函数，每次浏览器重新显示你的页面时都会说'drawFlag'。在'drawFlag'中，首先清除画布，然后绘制适当的标志。（2）根据鼠标悬停在画布上来选择适当的标志。有鼠标事件'mouseenter'和'mouseleave'，您应该为其定义处理函数（如上所述）。 'mouseenter'的处理函数设置一个布尔值，函数... – virtualnobi

...为'mouseleave'清除布尔值。如果布尔值为假（即，画布外的鼠标），则drawFlag函数会绘制静态标志，如果布尔值为true，则绘制挥动标志（鼠标位于画布内）。这可能需要您更改挥舞旗帜的渲染，从'setInterval'到'requestAnimationFrame'。 - 如果你google'requestAnimationFrame'，'addEventListener'和鼠标事件，你应该找到足够的例子和描述来放在一起。 – virtualnobi

帆布就像一张纸。没有任何物体可以悬停。
做你想做的事就是，绑定在标志的区域，
遵循'virtualnobi的回答，如果真正做你想做什么都，计算如果鼠标坐标落在该区域
。
像

if (mouseX<100 && mouseX>0 && mouseY>0 && mouseY<100){ //animate the flag }

使用mouseX=event.clientX;
mouseY=event.clientY;

有界区域为x =（0100），Y =（0100）在这里。

来源

2013-12-20 19:18:08 singhiskng

在鼠标悬停上更改画布绘制图像

回答

相关问题