Question

我不知道自己做错了什么。我使用moveTo和lineTo绘制了一个矩形，因为我想制作一个类似于矩形的形状。我只想让每个角落的x和y坐标移动，以便矩形可以在两个圆圈之间旋转。

在我有这种代码的区域 [Math.cos(angle * Math.PI / 180) * innerRadius , Math.sin(angle * Math.PI / 180) * innerRadius -5], -5s和+ 5s是矩形的宽度。当它开始时，宽度为10px，因为它以原点为中心。我为x坐标做cos并将其乘以innerRadius或outerRadius，具体取决于哪个坐标更接近特定半径。我为y坐标做同样的事情。它为什么翻转？

我原本想要制作类似于Simon Says玩具上的灯光的矩形形状。它点亮了你点亮的灯光。你能帮我用moveTo，LineTo做这个形状，这样那个形状可以旋转。 topRight和bottomRight上的坐标应该在它们之间有一个较大的距离，然后是另一个。

＆＃13;

window.onload = function(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");


  var innerRadius = 30;
  var outerRadius = 60;
  var wCenter = canvas.width/2;
  var hCenter = canvas.height/2



  var angle = 0;
  function rectangle(topLeft,topRight, bottomRight, bottomLeft){
    context.beginPath();
    context.moveTo(topLeft[0],topLeft[1]);
    context.lineTo(topRight[0],topRight[1]);
    context.lineTo(bottomRight[0], bottomRight[1]);
    context.lineTo(bottomLeft[0],bottomLeft[1]);
    context.fillStyle = "tomato";
    context.fill();
    context.closePath();
  }
  var num;
  var otherNum;
  (function animate(){
    console.log("TEst")
    context.clearRect(0, 0, canvas.width, canvas.height);		
    context.save();
    context.translate(wCenter, hCenter)
    context.beginPath()
    context.arc(0,0,outerRadius,0, Math.PI * 2, false);
    context.fillStyle = "orange"
    // context.fillStyle="white"
    context.fill();
    context.beginPath()
    context.arc(0,0,innerRadius,0, Math.PI * 2, true);
    context.fillStyle="white"
    context.fill()

    context.beginPath();
    context.fillStyle="tomato";

    rectangle(
      [Math.cos(angle * Math.PI / 180) * innerRadius , Math.sin(angle * Math.PI / 180) * innerRadius -5],
      [Math.cos(angle * Math.PI / 180) * outerRadius,   Math.sin(angle * Math.PI / 180) * outerRadius  -5], 
      [Math.cos(angle * Math.PI / 180) * outerRadius, Math.sin(angle * Math.PI / 180) * outerRadius +5],
      [Math.cos(angle * Math.PI / 180) * innerRadius, Math.sin(angle * Math.PI / 180) * innerRadius  + 5])

    --angle
    context.stroke()
    context.closePath();

    context.restore()
    window.requestAnimationFrame(animate)
  }())

}

＆＃13;

<canvas id="canvas" width="400" height="400"></canvas>

＆＃13;

Answer 1

基本矩形有点[innerRadius，-5] [outerRadius，-5] [outerRadius，5] [innerRadius，5]

现在你想围绕原点旋转它，所以你将每个点乘以旋转矩阵[[cos，sin] [-sin，cos]]。

看起来你只是旋转了中心点而不是整个形状。

以下是更正后的代码。

window.onload = function(){
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");


  var innerRadius = 30;
  var outerRadius = 60;
  var wCenter = canvas.width/2;
  var hCenter = canvas.height/2



  var angle = 0;
  function rectangle(topLeft,topRight, bottomRight, bottomLeft){
    context.beginPath();
    context.moveTo(topLeft[0],topLeft[1]);
    context.lineTo(topRight[0],topRight[1]);
    context.lineTo(bottomRight[0], bottomRight[1]);
    context.lineTo(bottomLeft[0],bottomLeft[1]);
    context.fillStyle = "tomato";
    context.fill();
    context.closePath();
  }
  var num;
  var otherNum;
  (function animate(){
    console.log("TEst")
    context.clearRect(0, 0, canvas.width, canvas.height);		
    context.save();
    context.translate(wCenter, hCenter)
    context.beginPath()
    context.arc(0,0,outerRadius,0, Math.PI * 2, false);
    context.fillStyle = "orange"
    // context.fillStyle="white"
    context.fill();
    context.beginPath()
    context.arc(0,0,innerRadius,0, Math.PI * 2, true);
    context.fillStyle="white"
    context.fill()

    context.beginPath();
    context.fillStyle="tomato";

    rectangle(
      [Math.cos(angle * Math.PI / 180) * innerRadius - Math.sin(angle * Math.PI / 180) * 5 , -Math.sin(angle * Math.PI / 180) * innerRadius - Math.cos(angle * Math.PI / 180) * 5],
      [Math.cos(angle * Math.PI / 180) * outerRadius - Math.sin(angle * Math.PI / 180) * 5 , -Math.sin(angle * Math.PI / 180) * outerRadius - Math.cos(angle * Math.PI / 180) * 5], 
      [Math.cos(angle * Math.PI / 180) * outerRadius + Math.sin(angle * Math.PI / 180) * 5, -Math.sin(angle * Math.PI / 180) * outerRadius + Math.cos(angle * Math.PI / 180) * 5],
      [Math.cos(angle * Math.PI / 180) * innerRadius + Math.sin(angle * Math.PI / 180) * 5, -Math.sin(angle * Math.PI / 180) * innerRadius + Math.cos(angle * Math.PI / 180) * 5])

    --angle
    context.stroke()
    context.closePath();

    context.restore()
    window.requestAnimationFrame(animate)
  }())

}

<canvas id="canvas" width="400" height="400"></canvas>

矩形正在翻转和旋转。我只是想让它围绕一个圆圈旋转

1 个答案: