Javascript 在鼠标上方更改画布绘制的图像

我真的在努力改变我的画布画的形象，所以我想我会看看是否有人可以在这里帮助我或提供建议

我在画布上画了一面静止的旗帜，也画了一面挥动的旗帜。我想让这面旗子在鼠标上挥动

我最初认为我必须创建两个单独的文件，一个用于静态，另一个用于波动方面。然后使用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);
}

window.onload=function（）{
var flag=document.getElementById（'banglaFlag'）；
班格拉斯塔蒂（旗帜，320）；
var定时器=banglaWave（标志30、15、200、200）；
};
函数banglaStatic（画布，宽度）{
//画孟加拉国国旗。
//声明与画布的宽度和高度有关的变量。
//波动函数需要变量C到L。
var a=宽度/1.9；
var b=200；
var c=7*a/13；
var l=a/13；
画布宽度=b；
canvas.height=a；
var ctx=canvas.getContext（'2d'）；
var半径=45；
};
函数banglaWave（画布、波长、振幅、周期、着色）{
var fps=30；
var ctx=canvas.getContext（'2d'）；
var w=canvas.width，h=canvas.height；
var od=ctx.getImageData（0,0，w，h）.data；
//变量ct=0，st=新日期；
返回setInterval（函数（）{
var id=ctx.getImageData（0,0，w，h）；
var d=id数据；
var now=（新日期）/期间；
对于（var y=0；y我不确定您的问题在哪里。我没有看到任何事件处理代码，因此我假设这是您的问题：

定义一个“处理鼠标事件”的函数。例如，如果您想在用户将鼠标移到标志上时移动标志，请定义如下内容：

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”（离开画布）、“mouseweel”等），
mousemove
是您的函数名称（称为事件处理程序）

不同浏览器（甚至浏览器版本）的事件略有不同，因此如果需要跨浏览器实现不同的事件处理程序，可能需要实现不同的事件处理程序

希望这有所帮助。
画布就像一张纸，没有任何可以悬停的对象。

因为做你想做的只是在国旗上划出一个区域，

按照“virtualnobi”的答案，计算鼠标坐标是否落在该区域，

如果是真的，你想做什么就做什么。

像

if（mouseX0&&mouseY>0&&mouseY）banglaWave函数会在mouseX=event.page.X；moustY=event.pageY之后运行吗？对不起，这是我第一次这样做。你能在JSFIDLE中给我看一下吗？听起来像是一些基础工作…：-）我想最好的方法是：（1）您需要一个使用
requestAnimationFrame
重新创建画布的循环。每当浏览器重新显示您的页面时，此函数将执行您自己的函数，例如
drawFlag
。在
drawFlag
中，首先清除画布，然后绘制适当的标志。（2）根据鼠标是否悬停在画布上选择适当的标志。有鼠标事件
mouseenter
和
mouseleave
，您应该为其定义处理程序函数（如上所述）。用于
mouseenter
的处理程序设置一个布尔值，用于
mouseleave
的函数……清除布尔值。如果布尔值为false（即鼠标在画布外），则
drawFlag
函数绘制静态标志；如果布尔值为true（鼠标在画布内），则绘制摆动标志。这可能需要您将挥动旗帜的呈现方式从
setInterval
更改为
requestAnimationFrame
——如果您使用谷歌
requestAnimationFrame
、
addEventListener
和鼠标事件，您应该可以找到足够的示例和描述来将其组合在一起。谢谢您的评论