canavs文本字符间距使用JS逐字计算实现实例页面

HTML代码：

<canvas width="300" height="100"></canvas>
<div><input type="range" min="-10" max="15" value="0" style="width:300px;"></div>
                

JS代码：

// letterSpacingText扩展方法详见页面源代码
// 下面是测试使用JS代码
var range = document.querySelector('input[type]');
var canvas = document.querySelector('canvas');    
var context = canvas.getContext('2d');
context.font = '32px sans-serif';
context.textAlign = 'center';
// 绘制方法
var draw = function () {
    // 清除之前的绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 字符间距设置
    canvas.style.letterSpacing = range.value + 'px';
    // 根据字符间距绘制文本
    context.letterSpacingText('我是一段文本', canvas.width / 2, 50);
};
// 改变字符间距后重绘
range.addEventListener('change', draw);
// 一进来根据默认值绘制
draw();