canavs文本字符间距使用CSS letter-spacing实现实例页面

HTML代码：

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

JS代码：

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var range = document.querySelector('input[type=range]');
// 绘制方法
var draw = function () {
    // 清除之前的绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 字符间距设置
    canvas.style.letterSpacing = range.value + 'px';
    // 并绘制文本，font属性值设置一定要在这里
    context.font = '32px sans-serif';
    context.fillText('我是一段文本', 0, 50);
};
// 改变字符间距后重绘
range.addEventListener('change', draw);
// 一进来根据默认值绘制
draw();