Javascript 在画布上绘制基本线

现在，线条被绘制成类似“扇形”的东西，但我需要在标准图形编辑器中绘制线条。我知道函数中的坐标传递有错误，但我不知道在哪里

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d");

canvas.width  = 640;
canvas.height = 480;

var posMouse = {};
posMouse.paint = false;

$('#myCanvas').mousedown(function (e) 
    {
        posMouse.paint = true;

        posMouse.x1 = e.pageX - this.offsetLeft;
        posMouse.y1 = e.pageY - this.offsetTop;         

        $("#xPosMouseDown").text("? - down: " + posMouse.x1 + "; ");                    
        $("#yPosMouseDown").text("Y - down: " + posMouse.y1 + "; ");                       
    });

$('#myCanvas').mousemove(function (e) 
    {           
        if (posMouse.paint == false){return false;}

                posMouse.x2 = e.pageX - this.offsetLeft;
                posMouse.y2 = e.pageY - this.offsetTop;

                context.beginPath();
                context.moveTo(posMouse.x1, posMouse.y1);        
                context.lineTo(posMouse.x2, posMouse.y2);                                    
                context.stroke();
                context.closePath();

                $("#xPosMouseMove").text("? - move: " + posMouse.x2 + "; ");                    
                $("#yPosMouseMove").text("Y - move: " + posMouse.y2 + "; ");            
    }); 

$('#myCanvas').mouseup(function (e) 
    {
        posMouse.paint = false;               
    }); 

$('#myCanvas').mouseleave(function (e) 
    {
        posMouse.paint = false;               
    });  

---

我自己从来没有使用过canvas元素，我真的无法一目了然地说出你的问题到底在哪里

但这是一个使用canvas和jquery创建绘图窗格的好例子

看看这个：

我相信OP所要求的是一种展示工具，然后在画布上画画的方式@John你需要做的是有一个临时画布来显示工具，你每次移动工具时都会清除它。因此，我在代码中添加了一个临时画布，并将其放置在“实际”画布上。现在，它在临时画布上显示工具操作，并在下面的画布上绘制结果

$(document).ready(function(){


    var canvas = document.getElementById("myCanvas"); // получаем элемент по идентификатору
    var context = canvas.getContext("2d"); // определяем 2D (двумерный) контекст отрисовки   

// Задаем ширину и высоту Canvas
    canvas.width  = 640; // ширина по умолчанию - 300
    canvas.height = 480; // ширина по умочанию - 150
    context = canvas.getContext('2d');

    // Make a temporary canvas to show our draw operations on
    var container = canvas.parentNode,
        tempCanvas = document.createElement('canvas'),
        tool = {};

    tempCanvas.id     = 'canvasTemp';
    tempCanvas.width  = canvas.width;
    tempCanvas.height = canvas.height;
    container.appendChild(tempCanvas);
    tempCtx = tempCanvas.getContext("2d");

    // End of temp code

    var posMouse = {};
    posMouse.paint = false;

    $('#canvasTemp').mousedown(function (e) 
        {
            posMouse.paint = true;

            posMouse.x1 = e.pageX - this.offsetLeft;
            posMouse.y1 = e.pageY - this.offsetTop;         

            $("#xPosMouseDown").text("Х - down: " + posMouse.x1 + "; ");                    
            $("#yPosMouseDown").text("Y - down: " + posMouse.y1 + "; ");                       
        });

    $('#canvasTemp').mousemove(function (e) 
        {           
            if (posMouse.paint == false){
                paintOnCanvas(tool);
                return false;
            }
                    tempCtx.clearRect(0,0,tempCanvas.width, tempCanvas.height);
                    posMouse.x2 = e.pageX - this.offsetLeft;
                    posMouse.y2 = e.pageY - this.offsetTop;

                    // Temporarily save the coords so we can draw on the actual canvas
                    tool.x1 = posMouse.x1;
                    tool.x2 = posMouse.x2;
                    tool.y1 = posMouse.y1;
                    tool.y2 = posMouse.y2;

                    tempCtx.beginPath();
                    tempCtx.moveTo(posMouse.x1, posMouse.y1);        
                    tempCtx.lineTo(posMouse.x2, posMouse.y2);                                    
                    tempCtx.stroke();
                    tempCtx.closePath();

                    $("#xPosMouseMove").text("Х - move: " + posMouse.x2 + "; ");                    
                    $("#yPosMouseMove").text("Y - move: " + posMouse.y2 + "; ");            
        }); 

    $('#canvasTemp').mouseup(function (e){
            paintOnCanvas(tool);
            posMouse.paint = false;               
    }); 

    $('#canvasTemp').mouseleave(function (e){
            paintOnCanvas(tool);
            posMouse.paint = false;               
    });

    // This paints the result of the tool operation on the canvas underneath.
    function paintOnCanvas(coords){
        context.beginPath();
        context.moveTo(coords.x1, coords.y1);        
        context.lineTo(coords.x2, coords.y2);                         
        context.stroke();
        context.closePath();    
    }
});  

---

对不起，你的问题是什么？对不起。这是我目前拥有的：但我需要一条简单的线。。。像Photoshop：）这样的东西仍然不是问题。你想在Photoshop中做什么？你需要正确地解释你想做什么（你的问题不清楚）以及到底出了什么问题。如果某些东西没有正确地出现，那么解释它出现了什么以及为什么它是错误的。如果你遇到了一个错误，那么告诉我们错误是什么，它发生在哪里。我认为这很清楚，他基本上是在模仿photoshop的线条工具@约翰看到我的答案了。