画布对象上的旋转元素，相对于父对象

Question

我正试图以不同的旋转方式在滑雪者（正方形）上绘制一对滑雪板（两个矩形）。当您旋转整个画布而不仅仅是对象时，我不太明白如何在画布上排列旋转元素。

目前我有这个：

ctx.fillStyle = 'rgba(0,0,0,0.8)';
ctx.fillRect(0, 0, W, H);

ctx.fillStyle = skiier.color;
ctx.fillRect(skiier.x, skiier.y, skiier.width, skiier.height);
ctx.fillStyle = '#00f';

var angle = 20;
ctx.rotate(angle*Math.PI/180);
ctx.fillRect(skiier.x, skiier.y,100,10);
ctx.fillRect(skiier.x, skiier.y + 20,100,10);
ctx.rotate(-angle*Math.PI/180);

这给了我这个：

但我想做的是以下内容：

考虑到滑雪者的x和y坐标不断变化，我该如何调整和定位滑雪板相对于他？

如果有帮助我在这里有一个演示： http://codepen.io/EightArmsHQ/pen/cfa7052ed205b664b066450910c830c5?editors=001

Answer 1

您应该考虑上下文restore，translate和// ... var angle = 20; ctx.save(); // save the state of the ctx ctx.translate(skiier.x, skiier.y); // translate your context point to be the same as skiier. ctx.rotate(angle * Math.PI / 180); ctx.fillRect(-25, 0, 100, 10); // You can draw from new context point. ctx.fillRect(-25, 20, 100, 10); // Same here. // Instead of rotating back, use restore()... // Useful to restore all ctx options as they were before the save() ctx.restore(); ，如下所示：

{{1}}

Answer 2

围绕一个点旋转：您需要将上下文转换为该点，旋转上下文，将上下文转换回来。

例如......

ctx.fillStyle = 'rgba(0,0,0,0.8)';
ctx.fillRect(0, 0, W, H);

ctx.fillStyle = skiier.color;
ctx.fillRect(skiier.x, skiier.y, skiier.width, skiier.height);
ctx.fillStyle = '#00f';

var angle = 20;
ctx.translate(skiier.x, skiier.y);
ctx.rotate(angle*Math.PI/180);
ctx.translate(-skiier.x, -skiier.y);
ctx.fillRect(skiier.x, skiier.y,100,10);
ctx.fillRect(skiier.x, skiier.y + 20,100,10);
ctx.rotate(-angle*Math.PI/180);