HTML5绘图之文字旋转

当前位置 : 首页 > 网页制作 > html5 > HTML5绘图之文字旋转

HTML5绘图之文字旋转

来源: 作者: 时间:2016-01-30 08:53
HTML5绘图之文字旋转在GDI GDI+中文字旋转是一件比较容易的事情,HTML5的Canvas中的旋转与GDI GDI+中的旋转稍微有点差异,先看一个图: 文字旋转的示例代码ctx beginPath();ctx fillStyle =

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)位置哦。

Tag:
网友评论

<