drawStar() with mouse inside canvas 鼠标向上鼠标向下

Question

我错过了什么？ drawCircle 和 DrawPolygon（它位于 codepen https://codepen.io/mancod/pen/oNYdrVL work fine. I am still very new to all this still, and beat myself up as nothing in life should be this messy. A star is a circle as is a polygon. I get that the star has an inner and outer radius, but I cannot get this star. Thank you in advance for eyes that can fill in the part I am missing or have in the wrong order for function drawStar(). I have commented out the drawline and drawcircle. If you want to know it that even work you can view it on https://jsfiddle.net/mancod/mhbrqxk8/45/ 中，我在其中注释掉了 drawStar。

`enter code here`var canvas,
    context,
    dragging = false,
    dragStartLocation,
    snapshot;
    


`enter code here`function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left,
        y = event.clientY - canvas.getBoundingClientRect().top;

    return {x: x, y: y};
}

`enter code here`function takeSnapshot (){
 snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
  
}

`enter code here`function restoreSnapshot() {
   context.putImageData(snapshot, 0, 0);
}


`enter code here`function drawLine(position) {
    context.beginPath();
    context.moveTo(dragStartLocation.x, dragStartLocation.y);
    context.lineTo(position.x, position.y);
    context.stroke();
}

`enter code here`// this is for making circles 
//d(P, Q) = p(x2 − x1)2 + (y2 − y1)2 {Distance formula}
//https://orion.math.iastate.edu/dept/links/formulas/form2.pdf
// comment out function to go back to drawing just straight lines.
function drawCircle (position) {
 var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
   context.beginPath();
   context.arc(position.x, position.y, radius, 0, 2 * Math.PI, false);
   
   context.fill();
}

**function drawStar (position, points, outerRadius, innnerRadius) {
var coordinates=[],
radius = index%2 == 0? outerRadius : innerRadius,
index=0;
for (index = 0; index < points; index++) {
        coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
        angle += Math.PI / points;
        
context.beginPath();
context.drawStar(position, points, innerRadius, outerRadius);
    context.moveTo(coordinates[0].x, coordinates[0].y+outerRadius);
    //for (index = 1; index < points; index++) //{
        //context.lineTo(coordinates[index].x + radius *Math.cos(angle), coordinates[index].y + radius * Math.sin(angle));
    //}
}
    context.closePath();
}**




function dragStart(event) {
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
  takeSnapshot();
}

function drag(event) {
    var position;
  
    if (dragging === true) {
    restoreSnapshot();
        position = getCanvasCoordinates(event);
        //to not see the radius line just reverse the order of the two below
      //drawCircle(position);
        //drawLine(position);
drawStar(position, 6, 2, 15);
    }
}

function dragStop(event) {
    dragging = false;
  restoreSnapshot();
    var position = getCanvasCoordinates(event);
    
      //to not see the radius line just reverse the order of the two below
  //drawCircle(position);
    //drawLine(position);
drawStar(postion,6, 2,15);
}


    canvas = document.getElementById("cv0");
    context = canvas.getContext('2d');
     context.strokeStyle = 'orange';
    
   context.fillStyle = 'hsl(' + 360*Math.random() +', 100%, 45%)';
 
    context.lineWidth = 5;

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);

Answer 1

让我们看一下drawStar()函数的参数定义：

drawStar (position, points, outerRadius, innnerRadius)

并提醒自己典型的程式化明星是什么样子

到目前为止还不错。 drawStar 函数在两个地方被调用：在 draw 和 dragStop 内。在这两种情况下，您都将其称为

drawStar(position, 6, 2, 15);

这意味着我们将 6 作为星形的点数 - 如果我们看上面，我们可以看到星形由 10 个点组成。这里的第二个错误是恒星半径的硬编码值 2 和 15。我想你想根据鼠标的移动动态调整它的大小，所以我们需要重新计算鼠标移动的半径。好吧，因为我们没有用到这两个参数，所以我们可以完全摆脱它并像这样称呼它：

drawStar(position, 10);

在 drawStar 函数中，我们需要计算星形的点，例如：

  for (index = 0; index < points; index++) {
    if (index % 2 == 0) {
      radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
    } else {
      radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)) * 0.5;
    }
    coordinates.push({
      x: dragStartLocation.x + radius * Math.cos(angle),
      y: dragStartLocation.y - radius * Math.sin(angle)
    });
    angle += Math.PI / points * 2;
  }

如您所见，动态计算内点和外点的半径，将点推入 coordinates 数组并最终将 36° 添加到 angle 变量（360°/10点=36°)

最后让我们遍历坐标数组并在屏幕上画线：

  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for (index = 1; index < points; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.closePath();
  context.fill();

这是一个基于您的 fiddle 的工作示例：

var canvas,
  context,
  dragging = false,
  dragStartLocation,
  snapshot;



function getCanvasCoordinates(event) {
  var x = event.clientX - canvas.getBoundingClientRect().left,
    y = event.clientY - canvas.getBoundingClientRect().top;

  return {
    x: x,
    y: y
  };
}

function takeSnapshot() {
  snapshot = context.getImageData(0, 0, canvas.width, canvas.height);

}

function restoreSnapshot() {
  context.putImageData(snapshot, 0, 0);
}


function drawLine(position) {
  context.beginPath();
  context.moveTo(dragStartLocation.x, dragStartLocation.y);
  context.lineTo(position.x, position.y);
  context.stroke();
}

// this is for making circles 
//d(P, Q) = p(x2 − x1)2 + (y2 − y1)2 {Distance formula}
//https://orion.math.iastate.edu/dept/links/formulas/form2.pdf
// comment out function to go back to drawing just straight lines.
function drawCircle(position) {
  var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
  context.beginPath();
  context.arc(position.x, position.y, radius, 0, 2 * Math.PI, false);

  context.fill();
}

function drawStar(position, points) {

  var coordinates = [];
  var index;
  var radius;
  var angle = Math.PI / 2;
  for (index = 0; index < points; index++) {
    if (index % 2 == 0) {
      radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
    } else {
      radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)) * 0.5;
    }
    coordinates.push({
      x: dragStartLocation.x + radius * Math.cos(angle),
      y: dragStartLocation.y - radius * Math.sin(angle)
    });
    angle += Math.PI / points * 2;
  }

  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for (index = 1; index < points; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.closePath();
  context.fill();
}




function dragStart(event) {
  dragging = true;
  dragStartLocation = getCanvasCoordinates(event);
  takeSnapshot();
}

function drag(event) {
  var position;

  if (dragging === true) {
    restoreSnapshot();
    position = getCanvasCoordinates(event);
    //to not see the radius line just reverse the order of the two below
    //      drawCircle(position);
    //drawLine(position);
    drawStar(position, 10);
  }
}

function dragStop(event) {
  dragging = false;
  restoreSnapshot();
  var position = getCanvasCoordinates(event);

  //to not see the radius line just reverse the order of the two below
  // drawCircle(position);
  //drawLine(position);
  drawStar(position, 10);
}


canvas = document.getElementById("cv0");
context = canvas.getContext('2d');
context.strokeStyle = 'orange';

context.fillStyle = 'hsl(' + 360 * Math.random() + ', 100%, 45%)';

context.lineWidth = 5;

canvas.addEventListener('mousedown', dragStart, false);
canvas.addEventListener('mousemove', drag, false);
canvas.addEventListener('mouseup', dragStop, false);

#cv0 {
  border: solid gray;
}

<canvas id='cv0' width=400 height=300></canvas>

drawStar() with mouse inside canvas 鼠标向上鼠标向下

drawStar() with mouse inside canvas mouse up mouse down

javascript

html5-canvas

drawStar() with mouse inside canvas 鼠标向上 鼠标向下

drawStar() with mouse inside canvas mouse up mouse down

javascript

html5-canvas

drawStar() with mouse inside canvas 鼠标向上鼠标向下