2

我在一个关于如何在画布中绘制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();
        };
4

2 回答 2

1

您可以使用Bresenham 的线算法找到鼠标起点和终点之间的所有点，然后使用fillRect. 您需要使用线算法的原因是因为如果用户移动鼠标太快，您将不会得到实线，而是有间隙的线。我修改了你的函数来做到这一点。您还可以传递线条粗细值来更改您希望笔划的大小。请注意，arcs我更喜欢使用相同的方法rect

现场演示

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

})();​

​</p>

于 2012-12-15T14:38:38.013 回答
0

如果我理解，你需要这个：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>
于 2012-12-15T13:25:44.083 回答