在画布上绘制旋转元素

我想在画布上绘制半复杂元素而不旋转画布，这样我就不需要计算元素的所有x/y点。在画布上绘制旋转元素

我认为基本的过程中，我需要使用方法是：

翻译0,0点到现场绘图元素将围绕其旋转，
旋转画布，
平局元素，
将画布向后旋转，
恢复原点。

我需要不止一次这样做。我读过旋转/旋转后面的部分可能会引入一些错误，最终的图像只有一点点关闭。有没有办法避免这种情况？

2015-05-30 Sloan Thrasher

我们需要代码。做一个好的尝试，当你陷入困境时来到这里。 – user2867288

我会看看'ctx.save（）'和'ctx.restore（）' - 它们不保存/恢复像素，而是内部状态。变换矩阵是受影响的事物之一。 :)更多信息，请看这里：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#A_save_and_restore_canvas_state_example – enhzflep

你没有给我们足够的上下文来帮助你。给我们更多的信息或一些代码！但总的来说，html5画布的工作流程是：画一些东西，擦除画布，计算新的位置，在他们的新位置重新绘制一些东西。你关于旋转某些东西的理论是正确的：翻译成旋转点，旋转，绘制某些东西（通常是偏移量），不旋转，不翻译。如果需要反复旋转，可以将转换命令放入函数中以便重复使用。 – markE

执行旋转和平移之前，请致电context.save()。这将创建画布当前转换的快照（以及一些其他内容，如绘图样式，剪辑区域等，但不包括像素数据）并将其存储在堆栈中。

绘制完成后，请拨打context.restore()。这会从状态堆栈中弹出上次保存的状态，并将画布的当前绘制状态恢复到该状态。

您可以根据需要经常这样做，而不会累积任何舍入差异。

实施例功能：

function drawImageRotated(x, y, rotation, image) { 
    context.save(); 

    context.translate(x, y); 
    context.rotate(rotation); 
    context.drawImage(image, -image.width/2, -image.height/2);   

    context.restore(); 

    // context translation and rotation are now on the same state they were 
    // before the function call 
}

有关画布状态的更多信息，请参阅the canvas specification。

来源

2015-05-30 20:26:08 Philipp

在画布上绘制旋转元素

回答

相关问题