[英]How to draw CIRCLE on canvas on mouse move
I'm trying to draw a circle on canvas on mouse move, but without success.我试图在鼠标移动时在画布上画一个圆圈,但没有成功。 My code is as follows:我的代码如下:
var damages_canvas = document.getElementById('damages-area'); var ctx_damages = damages_canvas.getContext('2d'); var circle_rect = damages_canvas.getBoundingClientRect(); var circle_drag = false; var circle_canvas_update = true; var circles = []; var markerColor = "#f00"; damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false); damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false); damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false); requestAnimationFrame(updateCircleCanvas); function updateCircleCanvas(){ if(circle_canvas_update){ drawCircleCanvas(); circle_canvas_update = false; } requestAnimationFrame(updateCircleCanvas); } function drawCircle(circle){ var startX = circle.startX, endX = circle.endX, startY = circle.startY, endY = circle.endY; ctx_damages.clearRect(0,0,damages_canvas.width,damages_canvas.height); ctx_damages.beginPath(); ctx_damages.moveTo(startX, startY + (endY-startY)/2); ctx_damages.bezierCurveTo(startX, startY, endX, startY, endX, startY + (endX-startY)/2); ctx_damages.bezierCurveTo(endX, endY, startX, endY, startX, startY + (endY-startY)/2); ctx_damages.closePath(); ctx_damages.stroke(); } function drawCircleCanvas(){ ctx_damages.setTransform(1,0,0,1,0,0); ctx_damages.clearRect(0, 0, damages_canvas.width, damages_canvas.height); ctx_damages.fillStyle = "transparent"; // Color ctx_damages.strokeStyle = markerColor; // Color circles.forEach(drawCircle) } function drawCircleMouseDown(e){ circle = { startX : e.offsetX - circle_rect.left, startY : e.offsetY - circle_rect.top, endX : 10, endY : 10 }; circle_drag = true; circles.push(circle); circle_canvas_update = true; } function drawCircleMouseUp(){ circle_drag = false; circle_canvas_update = true; } function drawCircleMouseMove(e){ if(circle_drag){ circle.endX = e.offsetX - circle_rect.left; circle.endY = e.offsetY - circle_rect.top; circle_canvas_update = true; } }
#damages-area {background:#f9f9f9}
<canvas id="damages-area" width=600 height=600></canvas>
I want to draw a circle , not ellipsis or anything else.我想画一个圆,而不是省略号或其他任何东西。 But in my case I get something strange.但就我而言,我得到了一些奇怪的东西。
Here is also the fiddle.这里也是小提琴。
Any idea how can I do it?知道我该怎么做吗?
Use arc to draw an arc in canvas.使用arc在画布上绘制弧线。 For circle start
and end
angles will be 0
and 2*Math.PI
对于圆的start
和end
角度将为0
和2*Math.PI
var damages_canvas = document.getElementById('damages-area'); var ctx_damages = damages_canvas.getContext('2d'); var circles = []; var markerColor = "#f00"; var offsetX = damages_canvas.offsetLeft; var offsetY = damages_canvas.offsetTop; var startX; var startY; var isMouseDown = false; var circle, radius; damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false); damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false); damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false); function Circle(startX, startY) { this.startX = startX; this.startY = startY; this.radius; this.draw = function() { ctx_damages.beginPath(); ctx_damages.arc(this.startX, this.startY, this.radius, 0, 2 * Math.PI); ctx_damages.strokeStyle = markerColor; ctx_damages.stroke(); } } function drawCircleMouseDown(e) { startX = parseInt(e.clientX - offsetX); startY = parseInt(e.clientY - offsetY); isMouseDown = true; circle = new Circle(startX, startY); circles.push(circle); } function drawCircleMouseUp() { isMouseDown = false; circle = null; } function drawCircleMouseMove(e) { if (!isMouseDown) { return; } mouseX = parseInt(e.clientX - offsetX); mouseY = parseInt(e.clientY - offsetY); circle.radius = getDistance(startX, startY, mouseX, mouseY); ctx_damages.clearRect(0, 0, damages_canvas.width, damages_canvas.height); circles.forEach(function(circ) { circ.draw(); }); } function getDistance(p1X, p1Y, p2X, p2Y) { return Math.sqrt(Math.pow(p1X - p2X, 2) + Math.pow(p1Y - p2Y, 2)) }
#damages-area {background:#f9f9f9}
<canvas id="damages-area" width=600 height=600></canvas>
These changes:这些变化:
var b=0.55191502449;
var damages_canvas = document.getElementById("damages-area");
var ctx_damages = damages_canvas.getContext("2d");
var circle_rect = damages_canvas.getBoundingClientRect();
var circles = [];
var markerColor = "#f00";
var circle_drag = false;
var circle_canvas_update = true;
damages_canvas.addEventListener('mousedown', drawCircleMouseDown, false);
damages_canvas.addEventListener('mouseup', drawCircleMouseUp, false);
damages_canvas.addEventListener('mousemove', drawCircleMouseMove, false);
requestAnimationFrame(updateCircleCanvas);
function updateCircleCanvas(){
if(circle_canvas_update){
drawCircleCanvas();
circle_canvas_update = false;
}
requestAnimationFrame(updateCircleCanvas);
}
function drawCircle(circle){
var k=circle.firstk,siiry= circle.startY,siirx= circle.startX;
ctx_damages.clearRect(0,0,damages_canvas.width,damages_canvas.height);
ctx_damages.beginPath();
ctx_damages.moveTo(0*k+siirx, 1*k+siiry);
ctx_damages.bezierCurveTo(b*k+siirx, 1*k+siiry, 1*k+siirx, b*k+siiry,
1*k+siirx, 0+siiry);
ctx_damages.moveTo(0*k-(2*0*k)+siirx, 1*k-(2*1*k)+siiry);
ctx_damages.bezierCurveTo(b*k-(2*b*k)+siirx, 1*k-(2*1*k)+siiry, 1*k-
(2*1*k)+siirx, b*k-(2*b*k)+siiry, 1*k-(2*1*k)+siirx, 0-(2*0)+siiry);
ctx_damages.moveTo(0*k+siirx, 1*k+siiry);
ctx_damages.bezierCurveTo(b*k-(2*b*k)+siirx, 1*k+siiry, 1*k-(2*1*k)+siirx,
b*k+siiry, 1*k-(2*1*k)+siirx, 0-(2*0)+siiry);
ctx_damages.moveTo(0*k-(2*0*k)+siirx, 1*k-(2*1*k)+siiry);
ctx_damages.bezierCurveTo(b*k+siirx, 1*k-(2*1*k)+siiry, 1*k+siirx, b*k-
(2*b*k)+siiry, 1*k+siirx, 0+siiry);
ctx_damages.stroke();
}
function drawCircleMouseDown(e){
circle = {
startX : e.offsetX - circle_rect.left,
startY : e.offsetY - circle_rect.top,
firstk : 10
};
circle_drag = true;
circles.push(circle);
circle_canvas_update = true;
}
function drawCircleCanvas(){
ctx_damages.setTransform(1,0,0,1,0,0);
ctx_damages.clearRect(0, 0, damages_canvas.width, damages_canvas.height);
ctx_damages.fillStyle = "transparent"; // Color
ctx_damages.strokeStyle = markerColor; // Color
circles.forEach(drawCircle)
}
function drawCircleMouseUp(){
circle_drag = false;
circle_canvas_update = true;
}
function drawCircleMouseMove(e){ // tätä uusi
if(circle_drag){
console.log(e.offsetX -circle.startX );
circle.firstk =Math.hypot((e.offsetX -circle.startX),(e.offsetY -
circle.startY))
circle_canvas_update = true;
}
}
I jsfidle this https://jsfiddle.net/narutofanforewe/u13ujcrL/1/ Check my blog too http://www.thenew3d.website/2018/02/28/bezier-circle/我 jsfiddle 这个https://jsfiddle.net/narutofanforewe/u13ujcrL/1/ 也检查我的博客http://www.thenew3d.website/2018/02/28/bezier-circle/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.