Question

我试图在鼠标移动时在画布上绘制一个圆圈，但没有成功。我的代码如下：

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>

我想绘制圈，而不是省略号或其他任何内容。但就我而言，我得到了一些奇怪的东西。

Here is also the fiddle.

知道我该怎么做？

Answer 1

使用arc在画布中绘制圆弧。对于圈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>

Answer 2

这些变化：

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

我jsfidle this https://jsfiddle.net/narutofanforewe/u13ujcrL/1/ 检查我的博客http://www.thenew3d.website/2018/02/28/bezier-circle/

如何在鼠标移动时在画布上绘制CIRCLE

2 个答案: