canvas字间距letter-spacing操作避坑

canvas字间距letter-spacing操作避坑

在canvas上面书写文字数字如果需要修改文字间距在谷歌浏览器中可以使用letter-spacing:2px,这种来修改间距,值可以是负的,但是需要使用真实canvas dom来操作,并且要在fillText之前一步编写才能有效,使用document.createElement(“canvas”)是不起作用的,使用vue的h(“canvas”,{style:{letterSpacing:“2px”}}),或者react的React.createElement(“canvas”,{style:{letterSpacing:“2px”}})也是不行的

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);