html画布很慢,重绘HTML5画布非常慢

我刚开始玩HTML5画布，我希望能用它做几个游戏。但是，一旦我开始绘制鼠标坐标，它研磨至接近停止：重绘HTML5画布非常慢

我所做的只是渲染38线和一些文字，它应该能够处理，不是吗？

我做错了什么？我希望能够渲染至少30 FPS，但对于这样的事情，我希望它能够画出1000次。

或者我只是使用错误的工具来完成这项工作？ WebGL是为了这个任务吗？为什么会比另一个慢得多？

String.prototype.format = function() {

var args = arguments;

return this.replace(/\{(\d+)\}/g, function(m, n) {

return args[n];

});

};

var $canvas = $('#canvas');

var c = $canvas[0].getContext('2d');

var scale = 20;

var xMult = $canvas.width()/scale;

var yMult = $canvas.height()/scale;

var mouseX = 0;

var mouseY = 0;

c.scale(xMult, yMult);

c.lineWidth = 1/scale;

c.font = '1pt Calibri';

function render() {

c.fillStyle = '#dcb25c';

c.fillRect(0, 0, scale, scale);

c.fillStyle = '#544423';

c.lineCap = 'square';

for (var i = 0; i <= 19; ++i) {

var j = 0.5 + i;

c.moveTo(j, 0.5);

c.lineTo(j, 19.5);

c.stroke();

c.moveTo(0.5, j);

c.lineTo(19.5, j);

c.stroke();

}

c.fillStyle = '#ffffff';

c.fillText('{0}, {1}'.format(mouseX, mouseY), 0.5, 1.5);

}

render();

$canvas.mousemove(function(e) {

mouseX = e.clientX;

mouseY = e.clientY;

render();

});

2012-06-22

mpen