canavs文本字符竖直排列JS逐字计算实现实例页面

回到相关文章 »

效果：

代码：

HTML代码：

<canvas width="100" height="200"></canvas>

JS代码：

// fillTextVertical扩展方法详见页面源代码
// 下面是测试使用JS代码
var canvas = document.querySelector('canvas');	
var context = canvas.getContext('2d');
context.font = '24px STKaiti, sans-serif';
context.textAlign = 'center';
context.textBaseline = 'top';
context.fillTextVertical('anglebaby和黄晓明', canvas.width / 2, 0);