blocks|key|126897|text|使用CSS3+Transform旋转文本是可能的，尽管很棘手：http://jsfiddle.net/PhilippeVay/hXnsT/2/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|126898|标题单元格中的每个文本都在一个span元素中。此跨度在宽度上受到限制，并且祖父(tr元素，但它也可以是th个父元素)的高度等于此宽度。|style|CODE|126899|在writing-mode+property的帮助下，文本也可以在IE8及以下版本中旋转，但较大的第一列中的文本需要专门在IE中移动。|126900|除此之外，标题单元格使用th元素(使用scope属性以获得更好的可访问性)而不是使用.heading类的td元素进行标记。|126901|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/PhilippeVay/hXnsT/2/|1|http://www.thecssninja.com/css/real-text-rotation-with-css^0|V|14|0|0|F|4|0|1|C|E|8|1|0|C|2|16|8|1G|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@$A|10|B|11|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@$A|15|B|16|1|17]]|C|$]]|$1|J|3|K|5|6|7|18|8|@$A|19|B|1A|F|G]|$A|1B|B|1C|F|G]|$A|1D|B|1E|F|G]]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]]]

It's possible though tricky to rotate text with CSS3 Transform : <a href="http://jsfiddle.net/PhilippeVay/hXnsT/2/" rel="nofollow">http://jsfiddle.net/PhilippeVay/hXnsT/2/</a> 
Each text in header cell is in a <code>span</code> element. This span is constrained in width and the grand-parent (tr element, but it could be the th parent as well) has an height equal to this width. 
Text could be rotated in IE8 and below as well with the help of the <code>writing-mode</code> <a href="http://www.thecssninja.com/css/real-text-rotation-with-css" rel="nofollow">property</a> but the text in the larger first column needs to be moved specifically in IE.

Beside this, header cells were tagged with <code>th</code> elements (with scope attribute for better accessibility) rather than <code>td</code> elements with <code>.heading</code> class.

blocks|key|1312911|text|这是可能的，请参阅快速小提琴了解这一点：http://jsfiddle.net/dev_null_dweller/qyfyb/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1312912|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dev_null_dweller/qyfyb/^0|K|17|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

It is possible, see quick fiddle for this: <a href="http://jsfiddle.net/dev_null_dweller/qyfyb/" rel="nofollow">http://jsfiddle.net/dev_null_dweller/qyfyb/</a>

blocks|key|1316619|text|最后，我重写了它，所以它完全符合我的要求，如果有人想使用它，可以在http://wncba.co.uk/results/javascript/vertical-text.js上找到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1316620|下面的页面展示了它的工作原理：http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5|1316621|entityMap|0|LINK|mutability|MUTABLE|url|http://wncba.co.uk/results/javascript/vertical-text.js|1|http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5^0|X|1I|0|0|F|3E|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

In then end I re-wrote it so it did exactly what I wanted and it's at <a href="http://wncba.co.uk/results/javascript/vertical-text.js" rel="nofollow">http://wncba.co.uk/results/javascript/vertical-text.js</a> if anyone wants to use it.

Here is a page that shows it working: <a href="http://wncba.co.uk/results/?action=navigate&amp;season=2012&amp;league_id=2&amp;division_id=7&amp;nav_key=4e16159770efb07ac6e6bae4f86c7dc5" rel="nofollow">http://wncba.co.uk/results/?action=navigate&amp;season=2012&amp;league_id=2&amp;division_id=7&amp;nav_key=4e16159770efb07ac6e6bae4f86c7dc5</a>

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content?

I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards.

Here is a link to a page with one of the tables: <a href="http://www.wncba.co.uk/results/index.php?action=navigate&amp;season=2011&amp;league_id=3&amp;nav_key=c0e692391f7e3b7303ff3f4ae8c19279" rel="nofollow">here</a>

I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's.

Thanks!

how to create vertical table heading text with html5 canvas?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有人知道是否可以在html5画布中创建垂直文本，然后根据内容调整画布的大小？我看过关于添加文本和旋转文本的帖子，但不知道如何在之后自动调整画布的大小。下面是一个包含其中一个表的页面的链接：我基本上想用不同画布中的垂直文本替换顶部的标题。团队名称需要是动态的，我不希望它们被生成为jpg。谢谢!

问如何用html5画布创建垂直表格标题文本？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用html5画布创建垂直表格标题文本？EN