挥旗飘扬的旗帜

Question

    <script type="text/javascript">


canvas.onmouseover = function onMouseover(e) {
   waveFlag( flag, 20, 10, 150, 200, -0.1 );
}

canvas.onmouseout = function onMouseover(e) {

}


</script>

上面的代码是当鼠标移动到旗帜时旗帜会挥动，鼠标何时停止挥动旗帜???

Answer 1

只需停止触发setInterval，该功能就会停止

    <script type="text/javascript">

var timer = null;
function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze )     {
    if (!squeeze)    squeeze    = 0;
    if (!shading)    shading    = 100;
    if (!period)     period     = 200;
    if (!amplitude)  amplitude  = 10;
    if (!wavelength) wavelength = canvas.width/10;

    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;
            var sq = (y-h/2)*squeeze;
            for (var x=0;x<w;++x){
                var px  = (y*w + x)*4;
                var pct = x/w;
                var o   = Math.sin(x/wavelength-now)*amplitude*pct;
                var y2  = y + (o+sq*pct)<<0;
                var opx = (y2*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);
}
  var canvas = document.getElementById("flag");

canvas.onmouseover = function onMouseover(e) {
   timer = waveFlag( flag, 20, 10, 150, 200, -0.1 );
}

canvas.onmouseout = function onMouseover(e) {
    window.clearInterval(timer);
    timer = null;
}


</script>