我想建立一个画布,可以通过鼠标移动来拖动。但我做错了什么,无法理解,因为一开始似乎能够工作,然后就像是有一个递增的错误,使得画布移动得太快了。
考虑以下代码:
在Plunker上的实时示例https://plnkr.co/edit/j8QCxwDzXJZN2DKszKwm。
有人可以帮我理解我缺少了什么吗?
考虑以下代码:
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
function draw() {
context.fillRect(25, 25, 100, 100);
}
function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
var drag = false;
var dragStart;
var dragEnd;
draw()
canvas.addEventListener('mousedown', function(event) {
dragStart = {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
drag = true;
})
canvas.addEventListener('mousemove', function(event) {
if (drag) {
dragEnd = {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
context.translate(dragEnd.x - dragStart.x, dragEnd.y - dragStart.y);
clear()
draw()
}
})
}
在Plunker上的实时示例https://plnkr.co/edit/j8QCxwDzXJZN2DKszKwm。
有人可以帮我理解我缺少了什么吗?