Question

我在一个关于如何在画布http://jsfiddle.net/ArtBIT/kneDX/中绘制的stackoverflow问题中发现了这个问题，但是我想让它连续画线而没有圆圈但是线条流畅。要更改的代码如下：

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>

更改绘制线条的画布

2 个答案: