Html5 canvas 飘扬的旗帜飘扬的旗帜 canvas.onmouseover=函数onmouseover（e）{ 波滞后（标志，20，10，150，200，-0.1）； } canvas.onmouseout=函数onMouseover（e）{ }

上面的代码是当鼠标移动到旗子上时，旗子将摆动，当鼠标离开时，我如何停止摆动旗子？

只需停止启动setInterval，该功能将停止

    <script type="text/javascript">


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

canvas.onmouseout = function onMouseover(e) {

}


</script>

var定时器=null；
函数波形滞后（画布、波长、振幅、周期、着色、挤压）{
如果（！挤压）挤压=0；
如果（！shading）shading=100；
如果（！period）period=200；
如果（！振幅）振幅=10；
如果（！波长）波长=画布宽度/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；
//变量ct=0，st=新日期；
返回setInterval（函数（）{
var id=ctx.getImageData（0,0，w，h）；
var d=id数据；
var now=（新日期）/期间；
对于（var y=0；yYou在onmouseout事件的正确轨道上。向我们展示flagswaving函数。此外，您不需要在赋值后命名函数。您可以在
canvas中不使用
onMouseover
分配它们。onMouseover=function（e）{
    <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>