我有一个简单的 Canvas 绘图应用程序。 有时,lineTo()命令产生的坐标线较少,并且图形具有许多边线:
我使用的是最新的Firefox,是因为连接不良或计算机忙碌吗?有没有解决的办法?
这是我的代码:JS FIDDLE
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
strokeStyle = "rgb(0,0,0)";
ctx.lineWidth=3;
stroke();
最佳答案
它的响应速度最快。您的浏览器将尽可能快地发送事件,但不能以任何方式保证能够跟踪您的移动鼠标。与客户端计算机上的负载有很多关系。
编辑— here is a modified fiddle展示了一些可能会使它变得更好的方法。该版本保留了一个单独的“点”队列,该队列每50毫秒绘制一次新点。这样一来,“mousemove”处理程序仅需记录事件中的点坐标,并且当鼠标快速移动时,绘图代码可以通过一个 Canvas 更新来绘制一堆点。它仍然不是完美的。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;
canvas.addEventListener('mousedown', function(e) {
this.down = true;
points.setStart(e.pageX, e.pageY);
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if (this.down) {
points.newPoint(e.pageX, e.pageY);
}
}, 0);
var points = function() {
var queue = [], qi = 0;
var ctx = canvas.getContext('2d');
function clear() {
queue = [];
qi = 0;
}
function setStart(x, y) {
clear();
newPoint(x, y);
}
function newPoint(x, y) {
queue.push([x, y]);
}
function tick() {
var k = 20; // adjust to limit points drawn per cycle
if (queue.length - qi > 1) {
ctx.beginPath();
if (qi === 0)
ctx.moveTo(queue[0][0], queue[0][1]);
else
ctx.moveTo(queue[qi - 1][0], queue[qi - 1][1]);
for (++qi; --k >= 0 && qi < queue.length; ++qi) {
ctx.lineTo(queue[qi][0], queue[qi][1]);
}
ctx.strokeStyle = "rgb(0,0,0)";
ctx.lineWidth = 3;
ctx.stroke();
}
}
setInterval(tick, 50); // adjust cycle time
return {
setStart: setStart,
newPoint: newPoint
};
}();