HTML画布使用javascript旋转文本而不移动背景图像

HTML Canvas using javascript to rotate text without moving the background image

本文关键字：移动 背景 图像 文本 布使用 javascript 旋转 HTML      更新时间：2023-09-26

我正在做一个使用画布的小项目，简单地把它放在图像的顶部。
有一个滑块可以改变位置和大小，但是没有一个用于旋转文本。
我已经在stackoverflow上寻找一种方法来旋转文本而不影响背景图像，但是没有任何帮助。
我知道

 context.rotate( Math.PI / 2 );
 context.translate( canvas.width / 2, canvas.height / 2 );

但这似乎是旋转整个东西，背景包括在内。

谁能给我指个正确的方向?
链接到笔: http://codepen.io/TryHardHusky/details/KdQQVq/

使用保存和恢复

ctx.save(); // pushes canvas state onto a stack
// your text code
ctx.restore(); // pops the last save off the stack.

记住，对于每个保存，必须有一个还原。它们可以嵌套。它保存到堆栈中，意思是最后进入。首先。

或者根据你的情况稍微快一点

// your text code
ctx.setTransform(1,0,0,1,0,0); // reset the transform to default;
相关文章：