У меня есть элемент холста, который автоматически заполняет все окно браузера клиента при загрузке. На нем можно рисовать мышкой, как в любом учебнике по созданию чертежной доски. Что я хочу сделать, так это сделать так, чтобы, если вы переместите мышь в любую крайнюю точку холста (или, возможно, выберете определенный инструмент «перемещения», вы можете перетащить холст в любом направлении, которое вы хотите), это свитки. В частности, я хочу, чтобы теоретически можно было прокручивать бесконечно, поэтому я не могу предварительно генерировать, я должен генерировать «больше холста» на лету. Кто-нибудь знает, как это сделать?
Если это поможет, это javascript на стороне клиента прямо сейчас: (html - это просто тег холста)
$(document).ready(function() {
init();
});
function init() {
var canvas = document.getElementById('canvas')
, ctx = canvas.getContext('2d')
, width = window.innerWidth
, height = window.innerHeight;
// Sets the canvas size to be the same as the browser size
canvas.width = width;
canvas.height = height;
// Binds mouse and touch events to functions
$(canvas).bind({
'mousedown': startDraw,
'mousemove': draw,
'mouseup': stopDraw,
});
};
// Triggered on mousedown, sets draw to true and updates X, Y values.
function startDraw(e) {
this.draw = true;
this.X = e.pageX;
this.Y = e.pageY;
};
// Triggered on mousemove, strokes a line between this.X/Y and e.pageX/Y
function draw(e) {
if(this.draw) {
with(ctx) {
beginPath();
lineWidth = 4;
lineCap = 'round';
moveTo(this.X, this.Y);
lineTo(e.pageX, e.pageY);
stroke();
}
this.X = e.pageX;
this.Y = e.pageY;
}
};
// Triggered on mouseup, sets draw to false
function stopDraw() {
this.draw = false;
};
