如何根据用户输入的X,Y点绘制HTML5画布线条？

Question

我正在尝试在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);

- Cynthia

Answer 1

非常简单，您可以使用4个输入字段，并在按下按钮时获取每个字段的值。

button.addEventListener('click', function() {
    ctx.beginPath();
    ctx.moveTo(x1.value, y1.value);
    ctx.lineTo(x2.value, y2.value);
    ctx.stroke();
}, false);

http://jsfiddle.net/TeGGx/

- Simon Sarris