How can I make two circle objects (inside the canvas ) movable?
Question
I have one circle that movable in canvas, and the circle is not the set position. It is created in any place when the mouse is clicked. I am trying to create two circles (pink and yellow) in a set position, and I want to create the circles drag-gable (mouse click -> able to move X, Y positions ) to any places on the canvas. How can I attempt this?
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); canvas.addEventListener('mousedown', function(e) { this.down = true; this.X = e.pageX; this.Y = e.pageY; }, 0); canvas.addEventListener('mouseup', function() { this.down = false; }, 0); canvas.addEventListener('mousemove', function(e) { if (this.down) { // clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(this.X, this.Y, 50, 0, 2 * Math.PI, true); ctx.fillStyle = "#FF6A6A"; ctx.fill(); ctx.stroke(); this.X = e.pageX; this.Y = e.pageY; } }, 0);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvas</title> </head> <body> <canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'></canvas> </body> </html>
1 answers
solution1
0 ACCPTED 2019-07-29 18:33:13
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var model = { circle1: { x: 200, y: 200 }, circle2: { x: 200, y: 200 } }; var radius = 50; function view(ctx, model) { function circle(c) { ctx.beginPath(); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2 * Math.PI, true); ctx.fillStyle = "#FF6A6A"; ctx.fill(); ctx.stroke(); } // clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); circle(model.circle1); circle(model.circle2); } function redraw() { view(ctx, model); } redraw(); function getCircleForPosition(x, y) { function intersect(a, b) { var d2 = Math.pow(ax - bx, 2) + Math.pow(ay - by, 2); r2 = Math.pow(radius, 2); return d2 < r2; } return [model.circle1, model.circle2].find(circle => intersect(circle, { x, y })); } canvas.addEventListener('mousedown', function(e) { model.dragging = getCircleForPosition(e.pageX, e.pageY); }, 0); canvas.addEventListener('mouseup', function() { model.dragging = undefined; }, 0); canvas.addEventListener('mousemove', function(e) { if (model.dragging) { model.dragging.x = e.pageX; model.dragging.y = e.pageY; redraw(); } }, 0);
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='500px'></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I make the circle object in canvas to movable
How can I add an image inside a circle in canvas?
How can I make a circle to move randomly in a canvas?
How can I draw a circle on a canvas?
How I can set text to canvas circle
Using Canvas via JavaScript, How Can I make a circle move to where I click it?
make canvas image movable ( draggable )
How can I make elements inside the canvas responsive?
How can I make a rectangle follow the mouseX position inside the canvas?
How to make canvas shape circle?
Related Tags