亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

addEventListener怎么深層傳遞事件e參數

addEventListener怎么深層傳遞事件e參數

慕慕森 2019-03-07 10:08:25
使用addEventListener時怎么在匿名函數哪里傳遞event呢?我的本意是在canvas畫布上弄一個跟隨鼠標移動的圖片;以下是全部代碼,html沒有展示var convas;var context;window.onload=function(){    //設置畫布    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;    }    //獲取當前鼠標位置    function getMousePos(event) {          var e = event || window.event;          return {'x':e.clientX,'y':e.clientY}    }    //紅色氣泡移動函數    function redMove(){        //記錄下所有氣泡的位置        //清除畫布        context.clearRect(0, 0, canvas.width, canvas.height);        // 重新添加氣泡        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);    }    //紅色氣泡添加移動函數    canvas.addEventListener("mousemove", function(e){        redMove();//這里有問題,鼠標移動事件不能傳遞    });}取消掉嵌套這樣可以達到目的canvas.addEventListener("mousemove", function(e){        context.clearRect(0, 0, canvas.width, canvas.height);        RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);    });但是鼠標移動會有明顯閃爍,不夠流暢是因為由于事件驅動畫布繪制導致的嗎?在考慮使用定時器遞歸推動canvas繪制而不是使用mousemove推動canvas繪制
查看完整描述

3 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

canvas.addEventListener("mousemove", function(e){

        redMove();//這里有問題,鼠標移動事件不能傳遞

    });

這樣寫事件肯定傳遞不了啊.因為你函數沒有接收.

把redMove(e)傳進去.估計也會卡頓.



卡頓的原因是你加載圖片的時候.

RedBubble方法里面創建了對個圖片對象,第一沒有必要,第二消耗太多內存

就創建一個圖片,然后在addEventListenter里面改變坐標就可以了.


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

<canvas id="c" width="500" height="500"></canvas>

<script type="text/javascript">


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>


查看完整回答
反對 回復 2019-03-18
?
手掌心

TA貢獻1942條經驗 獲得超3個贊

首先 分離后 

1、因為沒有傳遞 e 參數


//紅色氣泡添加移動函數

canvas.addEventListener("mousemove", function(e){

    redMove();//這里有問題,鼠標移動事件不能傳遞

});


這里 redMove 函數 沒有傳遞 e 參數, 并且也沒有 全局變量做暫存處理;所以e在這里 已經廢棄掉了;


導致 

// 重新添加氣泡

RedBubble("red.png",getMousePos(e).x,getMousePos(e).y,30,30);


這里 的 getMousePos(e)  中 參數  e  來源于 何處? 


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


查看完整回答
反對 回復 2019-03-18
  • 3 回答
  • 0 關注
  • 1008 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號