canvas字间距letter-spacing操作避坑

最新推荐文章于 2024-03-03 18:11:54 发布

LiuXiaodong2020

最新推荐文章于 2024-03-03 18:11:54 发布

阅读量4.2k

点赞数 1

分类专栏： canvas js 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/LiuXiaodong2020/article/details/121242495

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 1 订阅

订阅专栏

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