javascript - 如何仅围绕中点旋转一条线？

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>