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

标签 javascript jquery canvas

我正在使用 Canvas 开发一个小项目,简单地说,它将文本放在图像之上。
有一个 slider 可以更改位置和大小,但没有用于旋转文本的 slider 。
我在 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;

关于javascript - HTML Canvas 使用 javascript 旋转文本而不移动背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33306442/

相关文章:

javascript - jQuery - .text 返回 [Object Object] 而不是变量。

math - 从矩形点查找方向

javascript - 将带有单个键的 JavaScript 对象数组更改为包含对象数据的数组

javascript - 在 Javascript/jQuery 中添加带有变量的大块 HTML

javascript - PHP网络爬虫点击

javascript - Google map api - 标记标签

c# - 使用 MouseMove 事件在 Canvas 内移动动态绘制的矩形

android在触摸事件上绘图

javascript - 删除所选之前数组中的所有元素

javascript - React 组件是否深入比较 props 以检查是否需要重新渲染?