3 回答

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>

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 的各個屬性值呢?這樣啟動硬件加速 就不會造成抖動了
添加回答
舉報