addEventListener怎么深層傳遞事件e參數(shù)

使用addEventListener時怎么在匿名函數(shù)哪里傳遞event呢？
我的本意是在canvas畫布上
弄一個跟隨鼠標(biāo)移動的圖片；

以下是全部代碼，html沒有展示

var convas;
var context;

window.onload=function(){
    //設(shè)置畫布
    canvas=document.getElementById("canvas");
    canvas.height = 600;
    canvas.width  = 800;

    //獲取二維繪圖上下文
    context=canvas.getContext("2d");

    //生成紅色氣泡
    function RedBubble(redFile,redX,redY,redW,redH){
        var imgRed= new Image();
        imgRed.onload= function(){
            context.drawImage(imgRed,redX,redY,redW,redH);
        }
        imgRed.src= redFile;
    }

    //獲取當(dāng)前鼠標(biāo)位置
    function getMousePos(event) {
          var e = event || window.event;
          return {'x':e.clientX,'y':e.clientY}
    }

    //紅色氣泡移動函數(shù)
    function redMove(){
        //記錄下所有氣泡的位置
        //清除畫布
        context.clearRect(0, 0, canvas.width, canvas.height);
        // 重新添加氣泡
        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);
    }

    //紅色氣泡添加移動函數(shù)
    canvas.addEventListener("mousemove", function(e){
        redMove();//這里有問題，鼠標(biāo)移動事件不能傳遞
    });
}

取消掉嵌套

這樣可以達到目的

canvas.addEventListener("mousemove", function(e){
        context.clearRect(0, 0, canvas.width, canvas.height);
        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);
    });

但是鼠標(biāo)移動會有明顯閃爍，不夠流暢
是因為由于事件驅(qū)動畫布繪制導(dǎo)致的嗎？

在考慮使用定時器遞歸推動canvas繪制
而不是使用mousemove推動canvas繪制

回答

編輯回答

怣痛

每次重新加載圖片的問題。

2018年5月11日 18:21

編輯回答

亮瞎她

首先分離后
1、因為沒有傳遞 e 參數(shù)

//紅色氣泡添加移動函數(shù)
canvas.addEventListener("mousemove", function(e){
    redMove();//這里有問題，鼠標(biāo)移動事件不能傳遞
});

這里 redMove 函數(shù) 沒有傳遞 e 參數(shù)， 并且也沒有 全局變量做暫存處理；所以e在這里 已經(jīng)廢棄掉了；

導(dǎo)致 
// 重新添加氣泡
RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);

這里 的 getMousePos(e)  中 參數(shù)  e  來源于 何處？

2 、抖動是因為沒有使用硬件加速；只是使用定位的top left 是會造成抖動的；如果只是對圖片做動畫處理的話，為什么不用transform 的各個屬性值呢？這樣啟動硬件加速就不會造成抖動了

2018年6月7日 00:51

編輯回答

茍活

canvas.addEventListener("mousemove", function(e){
        redMove();//這里有問題，鼠標(biāo)移動事件不能傳遞
    });
這樣寫事件肯定傳遞不了啊.因為你函數(shù)沒有接收.
把redMove(e)傳進去.估計也會卡頓.


卡頓的原因是你加載圖片的時候.
RedBubble方法里面創(chuàng)建了對個圖片對象,第一沒有必要,第二消耗太多內(nèi)存
就創(chuàng)建一個圖片,然后在addEventListenter里面改變坐標(biāo)就可以了.

這是剛寫的簡易代碼.可以參考一下.

var canvas = document.getElementById("c");

var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "1.png";

canvas.addEventListener("mousemove",function(e){
    
    ctx.clearRect(0,0,500,500);
    ctx.drawImage(img,e.clientX,e.clientY,20,20);
    
})

</script>

2017年11月21日 07:29