请在下面找到jsfiddle以供参考
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var counter = 0;
c.addEventListener('DOMMouseScroll',function(event){
draw();
return false;
}, false);
function draw(){
var j = ++counter;
for(var i = 0; i < 10000; i++){
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("Hello World " + j ,10,50);
}
}
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var counter = 0;
c.addEventListener('mousewheel',function(event){
draw();
return false;
}, false);
function draw(){
var j = ++counter;
for(var i = 0; i < 10000; i++){
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("Hello World " + j ,10,50);
}
}
<!DOCTYPE html>
<html>
<body>
<span>Scroll on below canvas</span>
<br/>
<canvas id="myCanvas" width="600" height="100" style="border:5px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
现在尝试在上面的小提琴上使用mouseWheel在画布上快速滚动，你会发现 在Firefox中跳过了数字，而谷歌浏览器在没有跳过数字的情况下顺利渲染。
如何在Firefox浏览器中进行与Google Chrome相似的渲染？
答案 0 :(得分：1)
这可能不是你想要的，但我无法理解为什么你在draw方法中用同样的东西画了10k次。
window.requestAnimFrame = function(callback) {
window.setTimeout(callback, 1000 / 60);
};
(function wheely() {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
cnt = 0;
ctx.font = "30px Arial";
if ('onmousewheel' in c) c.addEventListener('mousewheel', wheeled, false);
else c.addEventListener('DOMMouseScroll', wheeled, false);
function wheeled(event) {
cnt++;
return false;
}
(function draw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("Hello World " + cnt, 10, 50);
window.requestAnimFrame(draw);
})();
})();