캔버스의 기본 라인 페인트

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

캔버스 요소 나 자신을 사용한 적이 어디에 이해할 수없는 정확히 어디에 문제이고, 난 정말 눈에 알 수 없습니다입니다.

하지만 이것은 캔버스와 jquery를 사용하여 드로 팬을 만드는 좋은 예입니다.

이것 좀 봐 : http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-and-jquery.html

Answer 2

Updated Demo

하면 영업 이익이 나는 도구를 표시하고 후 캔버스에 그릴 수있는 방법이라고 생각을 요청하는 무엇. @ 존 당신이해야 할 일은 당신이 그것을 옮길 때마다 지우는 도구를 보여주는 임시 캔버스를 갖는 것입니다. 그래서 임시 코드 캔버스를 코드에 추가하고 "실제"캔버스 위에 배치했습니다. 이제는 임시 캔버스에 도구 작업을 표시하고 결과를 아래 캔버스에 그립니다.

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