Question

现在线条被绘制成类似“粉丝”的东西，但我需要在标准图形编辑器中绘制线条。我在函数中的坐标转移中出现错误，但我无法理解

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;               
    });

Answer 1

<强> Updated Demo

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();    
    }
});

Answer 2

我自己从未使用过canvas元素，我无法一眼就看出你的问题究竟在哪里。

但这是使用canvas和jquery创建drawpane的一个很好的例子。

看看这个： http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-and-jquery.html

在画布中绘制基本线

2 个答案: