canvas画布调节字符间距

由于项目登录增加图片验证码，发现字符间距过大。导致显示不全（如下图）。于是考虑canvas属性来缩小字符间距。

 根据网上提供方法测试：

var c=document.getElementById("myCanvas");  // 需要获取到真实渲染的dom才会生效
var ctx=c.getContext("2d");
ctx.font="30px Arial";
c.style.letterSpacing = "2px";  // 在这里书写才能保证有效,其他之前设置可能都是没有效的
ctx.fillText("Hello World",10,50);

设置  c.style.letterSpacing = "2px"; 发现页面并不生效；

根据张鑫旭大佬的文章设置canvas { letter-pacing: 5px; }；

发现项目页面依然不生效；

考虑修改translate的水平位移；

		for(var i=0; i<4; i++) {
		//	取出随机的字母或数字
			var c = pool[rn(0,pool.length)]
		// 	随机出字体大小
			var fs = rn(14,24)
			// 随机字符旋转角度
			var deg = rn (-30, 30)
			ctx.font = fs+'px Simhei'
			ctx.textBaseline = 'top'
			// 设置字体填充颜色
			ctx.fillStyle = rc(80, 150)
			ctx.save()
			ctx.translate(30*i+15,15)
			ctx.rotate(deg*Math.PI/180)
			// ctx.style.letterSpacing = "2px";  // 在这里书写才能保证有效,其他之前设置可能都是没有效的
			ctx.fillText(c, -10, -15, 70)
			ctx.restore()
		}

将 ctx.translate(30*i+15,15)  改为  ctx.translate(15*i+15,15)；

结果展示正常。