douzhankui0758
douzhankui0758
2012-01-10 22:55

如何使用html5 canvas创建垂直表标题文本?

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: here

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!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • dpp66953 dpp66953 9年前

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

    Here is a page that shows it working: http://wncba.co.uk/results/?action=navigate&season=2012&league_id=2&division_id=7&nav_key=4e16159770efb07ac6e6bae4f86c7dc5

    点赞 评论 复制链接分享
  • douxian9060 douxian9060 9年前

    It is possible, see quick fiddle for this: http://jsfiddle.net/dev_null_dweller/qyfyb/

    点赞 评论 复制链接分享
  • doupang1917 doupang1917 9年前

    It's possible though tricky to rotate text with CSS3 Transform : http://jsfiddle.net/PhilippeVay/hXnsT/2/
    Each text in header cell is in a span 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 writing-mode property but the text in the larger first column needs to be moved specifically in IE.

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

    点赞 评论 复制链接分享