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

Question

This is a canvas JavaScript code.

 <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> 

I want radius to be shown or filled with color.

This is requirement. Start with a single left mouse click (down action) which will be the center of the circle and move the mouse without lifting the left mouse button to set the radius of the circle. The circle should be drawn as you move the mouse with radius equal to distance between the first point and the mouse position. Release the left mouse button to fix the radius. A marker is added at the point where the mouse button is released to mark that point. (This will be the point on the circumference of that circle)

Answer 1

You need to get the offset to the top left of the canvas and remove that from the mouse coordinates to you can get the coordinates relative to the canvas top left.

How I would handle the mouse.

// 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);

The snippet show how I use it to draw circles with position and radius marked.

 <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>