Question

我一直在尝试画布，事情进展顺利。然而，当旋转物体时，我最难旋转它。当我最终做到时，我发现根据顺序启动它的对象。具有rotation属性的对象将被传递给之后调用的对象。

我的所有对象都放入了自己的函数中，然后通过绘图函数调用。我很好奇，如果这一切都是真的，我必须意识到我的对象启动顺序或者是否有我遗失的东西。

如果您在彼此之前或之后移动Obj1和Obj2，您将看到结果不同。我的目标是在Obj2之前使用Obj1并且只旋转Obj1。

window.onload = function(){
	var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d'),
		x = 470,
		y = 260;

	canvas.width = 500;
	canvas.height = 500;

	function Obj1(){
	ctx.beginPath();
	ctx.translate(100,0);
	ctx.rotate(20 * Math.PI / 180);
    ctx.fillRect(x, y + 10, 20, 45);
	ctx.fillStyle = 'blue';
	ctx.fill();
    ctx.closePath();
	}

	function Obj2(){
		ctx.beginPath();
		ctx.rect(0,300,100, 200);
		ctx.fillStyle = "black";
		ctx.fill();
		ctx.closePath();
	}
	

	function draw(){
		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		Obj1();
		Obj2();
	}
	draw();
}

<canvas id="canvas"></canvas>

Answer 1

旋转对象后需要重置旋转矩阵

发生的变化是变换是级联的。渲染发生在堆栈而不是每个元素的基础上。

操作顺序是

TRANSFORM 
  DRAW
RESET
DRAW

这也是一个递归过程。您可以说旋转世界场景/视图端口以及单个对象。

TRANSFORM
  TRANSFORM 
    DRAW
  RESET
  TRANSFORM
    DRAW
  RESET
RESET

如果您发布一个简单的代码示例，我可以为您查看

看看

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

function Obj1(){
ctx.save();
ctx.beginPath();
ctx.translate(100,0);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(x, y + 10, 20, 45);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
ctx.restore();
}

我相信我的头脑。

防止canvas元素根据顺序操纵其他元素

1 个答案: