如何填充颜色/使画布圆圈可见

Question

这是一个画布 JavaScript 代码。

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var radius = 50;
  var nStartX = 0;
  var nStartY = 0;
  var bIsDrawing = false;
  var putPoint = function(e) {
    nStartX = e.clientX;
    nStartY = e.clientY;
    bIsDrawing = true;
    radius = 0;
  }
  var drawPoint = function(e) {
    if (!bIsDrawing)
      return;
    var nDeltaX = nStartX - e.clientX;
    var nDeltaY = nStartY - e.clientY;
    radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(nStartX, nStartY, radius, 0, Math.PI * 2);
    context.fill();
    context.fillStyle = 'rgba(0, 0, 0, 0)';
    context.lineWidth = 1;
    context.stroke();
  }
  var stopPoint = function(e) {
    bIsDrawing = false;
  }
  canvas.addEventListener('mousedown', putPoint);
  canvas.addEventListener('mousemove', drawPoint);
  canvas.addEventListener('mouseup', stopPoint);
</script>

我希望半径显示或填充颜色。

这是要求。首先单击鼠标左键（向下动作），这将是圆的中心，然后在不抬起鼠标左键的情况下移动鼠标来设置圆的半径。当您移动鼠标时，应绘制圆，半径等于第一个点和鼠标位置之间的距离。释放鼠标左键以固定半径。在释放鼠标按钮的点添加一个标记以标记该点。 （这将是该圆圆周上的点）

Answer 1

您需要获取画布左上角的偏移量并将其从鼠标坐标中删除，以便您可以获得相对于画布左上角的坐标。

我将如何处理鼠标。

// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler handles all events 
var mouseEvent = function (e) {
    mouse.x = e.clientX - mouse.origin.x;
    mouse.y = e.clientY - mouse.origin.y;
    mouse.buttonChanged = 0;
    if (e.type === "mousedown") {
        mouse.down = true;
        mouse.buttonChanged = e.which;
    } else if (e.type === "mouseup") {
        mouse.down = false;
        mouse.buttonChanged = e.which;
    }
    update();  // updates the display
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);

sn-p 展示了我如何使用它来绘制标记位置和半径的圆。

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

<script>
// constants
const TICK_SIZE = 5;
const GIZOM_SIZE = 3;
const CIRCLE_STYLE = "BLACK";
const CIRCLE_LINE_WIDTH = 1;
const FONT = "18px Arial";
const FONT_STYLE = "RED";

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// array of circles;
var circles = [];
// current circle being drawn
var currentCircle = null;
// true if mouse dragging
var dragging = false;

// draws a circle;
function drawCircle(circle) {
var nx,
ny;
ctx.strokeStyle = CIRCLE_STYLE;
ctx.lineWidth = CIRCLE_LINE_WIDTH;

// draw circle
if (!circle.showGizom) {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
    ctx.stroke();
} else {
    // calculate the radius
    var nx = circle.gx - circle.x;
    var ny = circle.gy - circle.y;
    circle.r = Math.sqrt(nx * nx + ny * ny);

    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
    // draw center tick
    ctx.moveTo(circle.x - TICK_SIZE, circle.y - TICK_SIZE);
    ctx.lineTo(circle.x + TICK_SIZE, circle.y + TICK_SIZE);
    ctx.moveTo(circle.x + TICK_SIZE, circle.y - TICK_SIZE);
    ctx.lineTo(circle.x - TICK_SIZE, circle.y + TICK_SIZE);

    // draw radius line
    ctx.moveTo(circle.x, circle.y);
    ctx.lineTo(circle.gx, circle.gy);

    // draw gizom
    ctx.moveTo(circle.gx - GIZOM_SIZE, circle.gy - GIZOM_SIZE);
    ctx.lineTo(circle.gx + GIZOM_SIZE, circle.gy + GIZOM_SIZE);
    ctx.moveTo(circle.gx + GIZOM_SIZE, circle.gy - GIZOM_SIZE);
    ctx.lineTo(circle.gx - GIZOM_SIZE, circle.gy + GIZOM_SIZE);

    ctx.stroke();

    // draw radius
    ctx.font = FONT;
    ctx.fillStyle = FONT_STYLE;
    ctx.textAlign = "center";
    // get the transform to draw the text
    nx /= circle.r; // normalise the vector from center to gizom
    ny /= circle.r;
    if(nx < 0){ // is text upside down
        // set the transform to be the revers and from the gizom
        ctx.setTransform(-nx, -ny, ny, -nx, circle.gx, circle.gy);
    } else {
        ctx.setTransform(nx, ny, -ny, nx, circle.x, circle.y);
    }
    ctx.fillText(circle.r.toFixed(1), circle.r / 2, 0);

    ctx.setTransform(1, 0, 0, 1, 0, 0); // restore transform
}
}
// draw all circles;
function drawCircles() {
var i = 0,
len = circles.length;
for (; i < len; i++) {
    drawCircle(circles[i]);
}
}
// render everything
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircles();
}
// create a new circle
function createCircle(x, y) {
return currentCircle = {
    x : x,
    y : y,
    r : 0,
    gx : x, // gizom location
    gy : y,
    showGizom : true,
};
}

// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler
var mouseEvent = function (e) {
mouse.x = e.clientX - mouse.origin.x;
mouse.y = e.clientY - mouse.origin.y;
mouse.buttonChanged = 0;
if (e.type === "mousedown") {
    mouse.down = true;
    mouse.buttonChanged = e.which;
} else if (e.type === "mouseup") {
    mouse.down = false;
    mouse.buttonChanged = e.which;
}
update();
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);

// function to update mouse interaction
function update() {
//if (mouse.down || dragging) { // while the is a need to render
    if (mouse.buttonChanged === 1) { // is the left button changed
        if (mouse.down) { // is it down
            if (currentCircle !== null) { // is there a circle active ??
                currentCircle.showGizom = false; // turn off its gizom
            }
            circles.push(createCircle(mouse.x, mouse.y)); // create a new circle at mouse
            dragging = true; // flag that we are dragging
        } else {
            dragging = false; // stop dragging
        }
    }
    if (dragging) { // while dragging move the circle gizom
        currentCircle.gx = mouse.x;
        currentCircle.gy = mouse.y;
    }
    // draw any updates
    render();
//}
}

</script>