更改绘制线的画布

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>