如何绘制HTML5画布线给定用户输入的X,Y点

How to draw HTML5 Canvas lines given user input of X,Y points?

本文关键字：输入 用户 布线 何绘制 绘制 HTML5      更新时间：2023-09-26

我试图在画布上建立一个平面图模型。目前，我在画布中有一个网格图像，并且用户可以通过单击和拖动鼠标来绘制线条。但是，这并不能保证直线。

无论如何，我可以在html页面中提供输入字段，供用户输入行的开始和结束x和y坐标，并在我的画布代码中更新?我是一个初学者，当它涉及到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);

很简单，你可以使用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/

相关文章：