当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5绘图之文字旋转

HTML5绘图之文字旋转

2018年09月13日  | 移动技术网IT编程  | 我要评论

游园不值,书法展示,导游考试网

html5绘图之文字旋转

在gdi/gdi+中文字旋转是一件比较容易的事情，html5的canvas中的旋转与gdi/gdi+中的旋转稍微有点差异，先看一个图：
这里写图片描述

文字旋转的示例代码

ctx.beginpath();

ctx.fillstyle = "#000000";

ctx.font = "52pt calibri";
ctx.textalign = "center";
ctx.filltext(this.end, endx, endy);

ctx.save();
ctx.translate(endx, endy);
ctx.rotate(math.pi/6);
ctx.filltext("文字2", 0, 0);
ctx.restore();

代码说明

canvas的rotate是针对画布进行的，也可以理解为opengs的状态机，对于画布来讲是全局的。所以要想在指定位置将文字旋转显示，那么就先将画面的原点移动到该位置，然后旋转画布，最后在（0，0）位置输出文字，记得一定是（0，0）位置哦。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网