HTML5画布-旋转矩形上的文本

帕维尔·巴宾(Pavel Babin)

我正在尝试在sqlare上将文本旋转45度。问题是我的文字在矩形下。我可以改变文字的位置吗?

我的代码就像

var c = document.getElementById("myCanvas");
var square= c.getContext("2d");
var text= c.getContext("2d");

text.fillStyle = "red";
text.fillText("1", 40, 50);
text.fillStyle = "#000000";

square.rotate(Math.PI / 4);
square.fillRect(50, 0, 50, 50);

jsfiddle

不是黑暗的绝对

您要先绘制文本,然后绘制矩形,然后再想知道为什么文本在矩形后面?

首先,您只需要getContext一次,而不是两次。

其次,以正确的顺序绘制事物:首先是背景,然后是前景。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在HTML5画布中移动矩形的角

来自分类Dev

拖动并选择HTML5画布中的文本

来自分类Dev

拖动并选择HTML5画布中的文本

来自分类Dev

带有html5画布的径向文本

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

html5画布上的部分楔形

来自分类Dev

在HTML5画布上定位

来自分类Dev

如何下载HTML5画布上的图像?

来自分类Dev

HTML5画布图像上的插图阴影

来自分类Dev

无法在html5画布上绘制

来自分类Dev

HTML5画布上的drawImage的奇怪错误

来自分类Dev

捕捉HTML5画布上的点击

来自分类Dev

旋转html5画布而不重绘画布上的元素

来自分类Dev

HTML5画布:在单个画布上的范围内旋转裁剪的图像

来自分类Dev

文字旋转HTML 5画布

来自分类Dev

如何检查鼠标单击是否在JavaScript中的HTML5画布上的旋转文本内?

来自分类Dev

HTML5画布合并到矩形以形成新形状

来自分类Dev

在悬停时更新HTML5画布矩形吗?

来自分类Dev

使用非矩形的html5画布裁剪图像并进行转换

来自分类Dev

如何在HTML5画布的矩形中添加滚动条?

来自分类Dev

缩放和旋转后,HTML5画布会回移

来自分类Dev

沿HTML5画布中的路径旋转移动的对象

来自分类Dev

如何在HTML5画布内旋转图像而不绘制图像?

来自分类Dev

通过从图像中心旋转并缩放来拉直HTML5画布中的图像

来自分类Dev

在HTML5画布中旋转JS对象时Y轴出现问题

来自分类Dev

检测HTML5画布上的圆圈上的鼠标单击

来自分类Dev

将多个文本实例添加到HTML5画布

来自分类Dev

在图像合成后添加文本,HTML5画布

来自分类Dev

奥运在HTML5画布上使用JavaScript敲响