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


how to create vertical table heading text with html5 canvas?

有人知道是否可以在html5画布中创建垂直文本,然后根据内容调整画布大小吗?

我看到过关于添加文本和旋转文本的帖子,但不知道如何在之后自动调整画布大小。

这里有一个链接到一个页面,其中有一个表:这里是

我基本上想用不同画布中的垂直文本替换顶部标题。团队名称需要是动态的,我不希望它们被生成为jpg。

谢谢!

这是可能的,请参阅快速小提琴:http://jsfiddle.net/dev_null_dweller/qyfyb/

使用CSS3转换旋转文本可能很棘手:http://jsfiddle.net/PhilippeVay/hXnsT/2/
标题单元格中的每个文本都在一个span元素中。此跨度在宽度上受到限制,并且父级(tr元素,但它也可能是第th个父级)的高度等于此宽度
writing-mode属性的帮助下,文本也可以在IE8及以下进行旋转,但较大的第一列中的文本需要在IE中具体移动。

除此之外,标头单元格使用th元素(具有范围属性以获得更好的可访问性)进行标记,而不是使用.heading类的td元素。

最后我重写了它,所以它完全符合我的要求http://wncba.co.uk/results/javascript/vertical-text.js如果有人想使用它。

这是一个显示它工作的页面:http://wncba.co.uk/results/?action=navigate&季节=2012&league_id=2&division_id=7&nav_key=4e161559770efb07ac6e6bae4f86c7dc5