更改繪製線的畫布

Question

我在如何在畫布上繪製的問題中找到了此問題http://jsfiddle.net/ArtBIT/kneDX/但我希望它可以在沒有圓形但平滑線條的情況下連續繪製線條。要改變的代碼如下：

ctx.fillCircle = function(x, y, radius, fillColor) { 
      this.fillStyle = fillColor; 
      this.beginPath(); 
      this.moveTo(x, y); 
      this.arc(x, y, radius, 0, Math.PI * 2, false); 
      this.fill(); 
     }; 

Answer 1

您可以使用Bresenham's line algorithm找到所有的鼠標之間的點開始和結束，然後填寫使用fillRect之間的點。您需要使用線條算法的原因是因爲如果用戶將鼠標移得太快，您將不會得到實線，而是會出現間隙。爲了做到這一點，我修改了你的功能。你也可以傳遞一個線條粗細值來改變你想要的筆畫的大小。注意：可以用arcs適用相同的我只是喜歡rect

Live Demo

(function() { 
    // Creates a new canvas element and appends it as a child 
    // to the parent element, and returns the reference to 
    // the newly created canvas element 

    function createCanvas(parent, width, height) { 
     var canvas = {}; 
     canvas.node = document.createElement('canvas'); 
     canvas.context = canvas.node.getContext('2d'); 
     canvas.node.width = width || 100; 
     canvas.node.height = height || 100; 
     parent.appendChild(canvas.node); 
     canvas.lastX = 0; 
     canvas.lastY = 0; 
     return canvas; 
    } 

    function init(container, width, height, fillColor) { 
     var canvas = createCanvas(container, width, height); 
     var ctx = canvas.context; 

     // define a custom fillCircle method 
     ctx.fillCircle = function(x1, y1, x2, y2, fillColor, lineThickness) { 
      this.fillStyle = fillColor; 

      var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1)); 
      if (steep) { 
       var x = x1; 
       x1 = y1; 
       y1 = x; 

       var y = y2; 
       y2 = x2; 
       x2 = y; 
      } 
      if (x1 > x2) { 
       var x = x1; 
       x1 = x2; 
       x2 = x; 

       var y = y1; 
       y1 = y2; 
       y2 = y; 
      } 

      var dx = x2 - x1, 
       dy = Math.abs(y2 - y1), 
       error = 0, 
       de = dy/dx, 
       yStep = -1, 
       y = y1; 

      if (y1 < y2) { 
       yStep = 1; 
      } 

      for (var x = x1; x < x2; x++) { 
       if (steep) { 
        this.fillRect(y, x, lineThickness, lineThickness); 
       } else { 
        this.fillRect(x, y, lineThickness, lineThickness); 
       } 

       error += de; 
       if (error >= 0.5) { 
        y += yStep; 
        error -= 1.0; 
       } 
      } 

     }; 
     ctx.clearTo = function(fillColor) { 
      ctx.fillStyle = fillColor; 
      ctx.fillRect(0, 0, width, height); 
     }; 
     ctx.clearTo(fillColor || "#ddd"); 

     // bind mouse events 
     canvas.node.onmousemove = function(e) { 
      if (!canvas.isDrawing) { 
       return; 
      } 
      mouseX = e.pageX - this.offsetLeft; 
      mouseY = e.pageY - this.offsetTop; 

      ctx.fillCircle(mouseX,mouseY,canvas.lastX,canvas.lastY,"#000",1); 

      canvas.lastX = mouseX; 
      canvas.lastY = mouseY; 

     }; 
     canvas.node.onmousedown = function(e) { 
      canvas.isDrawing = true; 
      canvas.lastX = e.pageX - this.offsetLeft; 
      canvas.lastY = e.pageY - this.offsetTop; 
     }; 
     canvas.node.onmouseup = function(e) { 
      canvas.isDrawing = false; 
     }; 
    } 

    var container = document.getElementById('canvas'); 
    init(container, 200, 200, '#ddd'); 

})();​ 

Answer 2

如果我理解，你需要這樣的：http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

這個腳本畫一條線從0,0到鼠標。

window.event.clientX =鼠標x座標 window.event.clientY =鼠標y座標

<script> 
    context.beginPath(); 
    context.moveTo(0,0); 
    context.lineTo(window.event.clientX,window.event.clientY); 
    context.stroke(); 
</script>