涂料的基本路线在画布

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

从未使用过的canvas元素我自己，我真的不能告诉一目了然，在哪儿你的问题。

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

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

Answer 2

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