HTML5绘图之文字旋转-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝30
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:230回复:0

HTML5绘图之文字旋转

楼主#
更多 发布于:2016-06-03 23:11

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

优质IT资源分享社区为你提供此文。

本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

WEB前端开发教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客