如何仅围绕它的中点旋转一条线？

Question

我想在js上显示一个风车canvas。现在，我在立方体上显示一条绿线。我在围绕它的中点旋转线时遇到问题。另外，我不希望我的立方体移动。 Save() 似乎不起作用？我不知道我做错了什么。我尝试在网上查找答案，但它们似乎不起作用或者我不理解它们。我的 canvas 中的元素不知何故消失了。

    var x = 600;

    function init() 
    {
        window.requestAnimationFrame(draw);
    }

    function draw() 
    {
    var ctx = document.getElementById('canvas').getContext('2d');

    ctx.clearRect(0, 0, 600, 600);

    // sciana przednia
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#000000";
    ctx.strokeRect(x/2,x/2,x/4,x/4);

    //sciana gorna
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#000000";
    ctx.moveTo(x/2,x/2);
    ctx.lineTo(x-x/3,x/4+x/6);
    ctx.lineTo(x-x/8,x/4+x/6);
    ctx.lineTo(x/2+x/4,x/2);    
    ctx.closePath();
    ctx.stroke();

    //sciana prawa
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#000000";
    ctx.moveTo(x/2+x/4,x/2+x/4);
    ctx.lineTo(x-x/8,x/2+x/7); 
    ctx.lineTo(x-x/8,x/4+x/6);
    ctx.stroke();
    ctx.closePath();

    //raczka
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#808080";
    ctx.moveTo(x/2+x/5,x/2-x/5);
    ctx.lineTo(x/2+x/5,x/2-x/8+50);
    ctx.stroke();
    ctx.closePath();

    ctx.save();
    //smiglo
    ctx.beginPath();
    ctx.translate(x/2, x/2);              
    ctx.rotate( (Math.PI / 180) * 25); 
    ctx.translate(-x/2, -x/2);
    ctx.fillStyle = "#00cc00";
    ctx.fillRect(x/2+x/5-100,x/2-x/5,200,10);
    ctx.closePath();
    ctx.restore();

    window.requestAnimationFrame(draw);
    }

    init();

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
var x = 600;

function init() {
  window.requestAnimationFrame(draw);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // sciana przednia
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#000000";
  ctx.strokeRect(x / 2, x / 2, x / 4, x / 4);

  //sciana gorna
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#000000";
  ctx.moveTo(x / 2, x / 2);
  ctx.lineTo(x - x / 3, x / 4 + x / 6);
  ctx.lineTo(x - x / 8, x / 4 + x / 6);
  ctx.lineTo(x / 2 + x / 4, x / 2);
  ctx.closePath();
  ctx.stroke();

  //sciana prawa
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#000000";
  ctx.moveTo(x / 2 + x / 4, x / 2 + x / 4);
  ctx.lineTo(x - x / 8, x / 2 + x / 7);
  ctx.lineTo(x - x / 8, x / 4 + x / 6);
  ctx.stroke();
  ctx.closePath();

  //raczka
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "#808080";
  ctx.moveTo(x / 2 + x / 5, x / 2 - x / 5);
  ctx.lineTo(x / 2 + x / 5, x / 2 - x / 8 + 50);
  ctx.stroke();
  ctx.closePath();

  ctx.save();
  //smiglo
  ctx.beginPath();
  ctx.translate(x / 2, x / 2);
  ctx.rotate((Math.PI / 180) * 25);
  ctx.translate(-x / 2, -x / 2);
  ctx.fillStyle = "#00cc00";
  ctx.fillRect(x / 2 + x / 5 - 100, x / 2 - x / 5, 200, 10);
  ctx.closePath();
  ctx.restore();

  window.requestAnimationFrame(draw);
}

init();

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

编辑：我现在明白如何围绕某个点旋转了。我仍然不知道如何只旋转线条而不是整个东西。

Answer 1

说到旋转，我认为你做得很好：在你的例子中，绿线旋转了 25 度。你只需要旋转它的中点即可。

但要这样做，我认为最好在代码中进行其他更改：绘制立方体的部分很难处理，每当您想编辑代码时，这部分都会引起问题。我建议将它隔离在 drawCube() 函数中并使用适当的 (x,y) 坐标。根据我的说法，它应该是这样的：

function draw() {
    angle += 5;
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 180 * angle);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // It rotates
    drawLine();
    ctx.restore();

    // It doesn't rotate
    drawCube();
}

然后，您的代码将起作用。你所要做的就是让线绕其中点旋转，但你说你知道怎么做。

祝你好运！

编辑： 我添加了一个带有工作示例的片段，以及像您这样的多维数据集，可能会有所帮助。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var btnExample = document.getElementById('btnExample');
var btnCube = document.getElementById('btnCube');

var angle = 0;
var fps = 1000 / 60;

var propellerWidth = 100;
var propellerHeight = 10;
var towerWidth = 2;
var towerHeight = 100;

var mode = {
 CUBE: 'CUBE',
 EXAMPLE: 'EXAMPLE'
}
var currentMode = mode.EXAMPLE;

btnExample.onclick = function() {
 currentMode = mode.EXAMPLE;
}

btnCube.onclick = function() {
 currentMode = mode.CUBE;
}

setInterval(function() {
  angle += 3;
  draw(canvas, ctx, (canvas.width - propellerWidth) / 2, (canvas.height - propellerWidth) / 2, angle);
}, fps);

function draw(canvas, ctx, cx, cy, angle) {    
    var towerX = cx + propellerWidth / 2 - towerWidth / 2;
    var towerY = cy + propellerWidth / 2;
    var propellerX = (canvas.width - propellerWidth) / 2;
    var propellerY = (canvas.height - propellerHeight) / 2;
    
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw other things that don't rotate
    if (currentMode === mode.EXAMPLE) {
     drawHelp(canvas, ctx);
    }
    
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 180 * angle);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);
    
    // Draw things that rotate
    drawPropeller(ctx, propellerX, propellerY, propellerWidth, propellerHeight);
    ctx.restore();
    
    // Draw other things that don't rotate
    if (currentMode === mode.EXAMPLE) {
     drawTower(ctx, towerX, towerY, towerWidth, towerHeight);
    } else if (currentMode === mode.CUBE) {
     drawCube(ctx, towerX, towerY, 30);
    }
}

function drawPropeller(ctx, propellerX, propellerY, propellerWidth, propellerHeight) {
    ctx.fillStyle = 'black';
    ctx.fillRect(propellerX, propellerY, propellerWidth, propellerHeight);
}

function drawTower(ctx, towerX, towerY, towerWidth, towerHeight) {
    ctx.fillStyle = 'red';
    ctx.fillRect(towerX, towerY, towerWidth, towerHeight);
}

function drawCube(ctx, x, y, size) {
 ctx.strokeStyle = 'black';
 
 ctx.beginPath();
 ctx.moveTo(x, y);
 ctx.lineTo(x, y + size);
 ctx.closePath();
 ctx.stroke();
 
 var x1 = x - size + (size / 4) + (size / 16);
 var y1 = y + (size * 1.25);
 var x2 = x1 + (size / 3);
 var y2 = y1 - (size * 2 / 3);
 var x3 = x2 + size;
 var y3 = y2;
 var x4 = x3 - (size / 3);
 var y4 = y1;
 var x5 = x4;
 var y5 = y4 + size;
 var x6 = x3;
 var y6 = y3 + size;

 ctx.strokeRect(x1, y1, size, size);
 

 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.closePath();
 ctx.stroke();
 

 ctx.beginPath();
 ctx.moveTo(x2, y2);
 ctx.lineTo(x3, y3);
 ctx.closePath();
 ctx.stroke();
 

 ctx.beginPath();
 ctx.moveTo(x3, y3);
 ctx.lineTo(x4, y4);
 ctx.closePath();
 ctx.stroke();
 

 ctx.beginPath();
 ctx.moveTo(x3, y3);
 ctx.lineTo(x6, y6);
 ctx.closePath();
 ctx.stroke();

 ctx.beginPath();
 ctx.moveTo(x5, y5);
 ctx.lineTo(x6, y6);
 ctx.closePath();
 ctx.stroke();
}

function drawHelp(canvas, ctx) {
 ctx.globalAlpha = 0.2;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.moveTo(canvas.width, 0);
  ctx.lineTo(0, canvas.height);
  ctx.stroke();
  ctx.closePath();
  
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, propellerWidth / 2, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
  
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, propellerWidth / 2, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
  
 ctx.globalAlpha = 1;
}

canvas {
  border: 1px solid black;
}

<canvas id="canvas" width=200 height=200></canvas>
<br>
<button id="btnExample">Example</button>
<button id="btnCube">Cube</button>

如何仅围绕它的中点旋转一条线？

How to rotate only a line around it's middle point?

javascript

canvas

rotation

line