在HTML5画布上绘制旋转文字 [英] Drawing rotated text on a HTML5 canvas

问题描述

正在开发的Web应用程序的一部分需要我创建条形图以显示各种信息。我想，如果用户的浏览器是能够，我会使用HTML5画布元素来绘制它们。我没有为我的图形绘制线和条纹，但是当它涉及到标记的轴，条形，或线我碰到一个障碍。如何将旋转的文本绘制到canvas元素上，以便它与标记的项目对齐？几个示例包括：

Part of a web application I'm developing requires me to create bar graphs to display various information. I figured, if the user's browser is capable, I would draw them using the HTML5 canvas element. I have no problem drawing lines and bars for my graphs, but when it comes to labeling the axes, the bars, or the lines I ran into a snag. How do I draw rotated text onto a canvas element so that it lines up with the item it is labeling? A couple examples include:

• 顺时针旋转文本90度计数器
  以标记y轴


• 旋转文本90度计数器
  顺时针旋转到垂直方向上的标签条
  条形图


• 将文本任意旋转到
  

任何指针都会感激。

推荐答案

像其他人提到的，你可能想看看重用一个现有的图形解决方案，但旋转文本不是太难。有点混乱的位（对我）是你旋转整个上下文，然后绘制它：

Like others have mentioned, you probably want to look at reusing an existing graphing solution, but rotating text isn't too difficult. The somewhat confusing bit (to me) is that you rotate the whole context and then draw on it:

ctx.rotate(Math.PI*2/(i*6));

angle以弧度表示。代码为摘自此示例，我认为这是针对MDC的转换部分帆布教学。

The angle is in radians. The code is taken from this example, which I believe was made for the transformations part of the MDC canvas tutorial.

请参阅以下答案以获得更完整的解决方案。

Please see the answer below for a more complete solution.

这篇关于在HTML5画布上绘制旋转文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！