Question

我想在js画布上显示风车。现在，我在多维数据集上显示一条绿线。我在绕线的中点旋转线时遇到问题。另外，我不希望我的立方体移动。 Save（）似乎不起作用？我不知道我在做什么错。我尝试在线查找答案，但它们似乎无效或我听不懂。我画布中的元素以某种方式消失了。

    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>

如何仅绕其中间点旋转一条线？

1 个答案: