使用鼠标事件在HTML5画布上绘制圆形/椭圆 [英] Drawing circle/ellipse on HTML5 canvas using mouse events

问题描述

我想在油漆中使用椭圆选项来绘制我的画布。我已经实现了这一部分。问题是我不能得到圆的半径，目前我有硬编码为15.我也想绘制椭圆（与绘画相同）不精确的圆。
这是我的代码绘制圆在画布上使用鼠标事件。请帮助我的代码来实现我上述的要求。

I want something like ellipse option in paint for drawing on my canvas. I have achieved this partially. The problem is i am not able to get radius of circle, currently i have hard coded it to 15. Also i want to draw ellipse(same as paint) not exact circle. This is my code for drawing circle on canvas using mouse events.Please help me with code to achieve my above mentioned requirements.

 function tool_circle() {
        var tool = this;
        this.started = false;

        this.mousedown = function (ev) {
            tool.started = true;
            tool.x0 = ev._x;
            tool.y0 = ev._y;
        };

        this.mousemove = function (ev) {
            if (!tool.started) {
                return;
            }

            context.fillStyle = 'red';

            var distance = Math.sqrt(Math.pow(tool.x0 - ev._x, 2) + Math.pow(tool.y0 - ev._y));
            context.beginPath();

            context.arc(tool.x0, tool.y0,15, 0, Math.PI * 2, false);
            context.stroke();
            context.fill();
        };

        this.mouseup = function (ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
                img_update();
            }
        };
    }

推荐答案

markE的答案是，使用贝塞尔曲线将绘制椭圆，但它不会给你你可能需要的确切半径。

I would something similar as with markE's answer however, using Bezier curve will draw ellipses but it won't give you the exact radius that you probably would need.

对于一个函数来绘制手动椭圆是很简单的 -

For that a function to draw a manual ellipse is needed, and it's rather simple -

这个函数将取一个角起点和终点，并在边界内精确绘制一个椭圆 ：

This function will take a corner start point and and end point and draw an ellipse exactly within that boundary:

function drawEllipse(x1, y1, x2, y2) {

    var radiusX = (x2 - x1) * 0.5,   /// radius for x based on input
        radiusY = (y2 - y1) * 0.5,   /// radius for y based on input
        centerX = x1 + radiusX,      /// calc center
        centerY = y1 + radiusY,
        step = 0.01,                 /// resolution of ellipse
        a = step,                    /// counter
        pi2 = Math.PI * 2 - step;    /// end angle

    /// start a new path
    ctx.beginPath();

    /// set start point at angle 0
    ctx.moveTo(centerX + radiusX * Math.cos(0),
               centerY + radiusY * Math.sin(0));

    /// create the ellipse    
    for(; a < pi2; a += step) {
        ctx.lineTo(centerX + radiusX * Math.cos(a),
                   centerY + radiusY * Math.sin(a));
    }

    /// close it and stroke it for demo
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

演示标记矩形区域以显示椭圆正好在其中

The demo marks the rectangle area too to show that the ellipse is exactly within it.

要处理鼠标操作，让您绘制椭圆，您可以：

To handle mouse operation that will let you draw the ellipse you can do:

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width,
    h = canvas.height,
    x1,                 /// start points
    y1,
    isDown = false;     /// if mouse button is down

/// handle mouse down    
canvas.onmousedown = function(e) {

    /// get corrected mouse position and store as first point
    var rect = canvas.getBoundingClientRect();
    x1 = e.clientX - rect.left;
    y1 = e.clientY - rect.top;
    isDown = true;
}

/// clear isDown flag to stop drawing
canvas.onmouseup = function() {
    isDown = false;
}

/// draw ellipse from start point
canvas.onmousemove = function(e) {

    if (!isDown) return;

    var rect = canvas.getBoundingClientRect(),
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top;

    /// clear canvas
    ctx.clearRect(0, 0, w, h);

    /// draw ellipse
    drawEllipse(x1, y1, x2, y2);
}

提示可以在主画布上创建顶部画布做图画本身。当鼠标按钮被释放，然后将图纸转移到您的主画布。这样，您就不必在绘制新形状时重绘所有内容。

A tip can be to create a top canvas on top of your main canvas and do the drawing itself there. When mouse button is released then transfer the drawing to your main canvas. This way you don't have to redraw everything when drawing a new shape.

希望这有助于！

这篇关于使用鼠标事件在HTML5画布上绘制圆形/椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！