Question

我真的很难改变我的画布绘制图像，所以我想我会看到是否有人可以在这里协助我或提供建议。

我在画布上画了一个静态旗帜，我还画了一面挥动的旗帜。我试图让这个标志在鼠标悬停时挥手。

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

提前感谢您的任何建议/协助。

Answer 1

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

定义一个“处理鼠标事件”的函数。例如，如果要在用户将鼠标移到其上时移动标记，请定义类似：

的内容

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是函数的名称（事件处理程序，因为它被调用）。

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

希望这有助于......

Answer 2

画布就像一张纸。没有任何物体可以悬停。
做你想做的只是，在旗帜上绑定一个区域，
按照'virtualnobi'回答并计算鼠标坐标是否落在该区域上，
如果真的做你想做的事。
像

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

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

有界区域是x =（0,100），y =（0,100）这里。

鼠标悬停时更改画布绘制的图像

2 个答案: