我正在尝试在Canvas中构建一个楼层平面图模型。当前,我的画布中有一张网格图片,并且用户可以通过点击和拖动鼠标来绘制线条。但是,这不能保证直线。
我猜测这涉及修改以下代码:
是否有办法在HTML页面中提供输入框,让用户输入线段的起始和结束x和y坐标,并在我的Canvas代码中更新它?由于我对JS / AJAX的理解很浅薄,所以需要任何基础帮助:)
目前,这是规定如何绘制线条的部分:
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
if(canvas.getContext) {
$('#canvas').mousedown(function (evt) {
var offset = $('#canvas').offset();
context.beginPath();
context.moveTo(20, 20);
});
$(document).mousemove(function(evt) {
var offset = $('#canvas').offset();
context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top);
context.stroke();
}).mouseup(function() {
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
$('#clearcanvas').click(function () {
context.clearRect(0, 0, 600, 580);
});
}
});
我猜测这涉及修改以下代码:
context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top);