canvas文字的渲染问题

标签：文字 canvas const 渲染 ctx fontFaces 100

1.简单的文字绘制，包括文字的一些样式的设置

canvas的默认字体是 ‘10px sans-serif’

我们可以通过如下语句进行文字的设置

const fonts=‘bold italic’ //倾斜加粗

const name=‘宋体’

const size=‘14’

const text=‘canvas总结’

const ctx = document.getElementById("canvas").getContext("2d"); ctx.save() ctx.beginPath() ctx.font = `${fonts} ${size}pt "${name}"`//设置字体大小名称倾斜加粗

ctx.textAlign = "left" || "right" || "center" || "start" || "end"//文本对齐的样式

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";//设置字体基线对齐样式

ctx.fillStyle = '#000'//设置字体颜色

ctx.measureText(text);//可以测量文字的宽度

ctx.direction = "ltr" || "rtl" || "inherit";//设置文本的绘制方向，从左到右，从右到左，继承

 ctx.fillText(text, 0, 100)//数字指的是位置信息，在那个位置绘制文字

ctx.strokeText("Hello world", 0, 100);//绘制空心的文字

 ctx.restore()

2.文字的旋转问题

可以参考这个https://blog.csdn.net/a460550542/article/details/122062840

//水平文字的绘制

 const ctx = document.getElementById("canvas").getContext("2d");

ctx.fillStyle='green'

ctx.fillText('canvas总结',100,100)

ctx.save()

ctx.translate(100,100)//旋转点为正常绘制水平文字的起始点为旋转中心

ctx.rotate((90 * Math.PI) / 180)//设置旋转角度 ctx.fillStyle='red' ctx.fillText('canvas总结',0,0)  ctx.restore() //以中心点为旋转中心 let strWidth=ctx.measureText('canvas总结').width

ctx.save()

ctx.translate(100+strWidth/2,100-strWidth/2)//旋转点为正常绘制水平文字的起始点为旋转中心

ctx.rotate((90 * Math.PI) / 180)//设置旋转角度 ctx.fillStyle='blue' ctx.fillText('canvas总结',0,0)  ctx.restore()  3.canvas远程字体加载  const fontFacesPrevRef = useRef<any>() const fontFaces =['宋体','微软雅黑','幼圆'] const isResolved = isMatch(fontFacesPrevRef.current, fontFaces || []) && fontResolved     console.info(isResolved, flag, fontFaces?.length, '发版远端验证字体加载流程用')     if (!isResolved && fontFaces?.length && flag) {       //已经加载过的字体没必要再加载一次，过滤出不同的字体,开档后diff是[]
      const diff = difference(fontFaces, fontFacesPrevRef.current)       // const diff = fontFaces.filter(item => {       //   return fontFacesPrevRef.current && fontFacesPrevRef.current?.indexOf(item) < 0       // })       let observers       if (diff.length) {         observers = diff.map(item => {           return new FontFaceObserve(item).load()         })       } else {         //开档的情况         observers = fontFaces.map(item => {           return new FontFaceObserve(item).load()         })       }       Promise.allSettled(observers).then(res => {         if (res) {           reDraw()         }       })       // 加载失败的暂未处理，尝试再次添加到observers中，但是依旧加载不成功       fontResolved = observers.length > 0     }     fontFacesPrevRef.current = fontFaces

标签：文字,canvas,const,渲染,ctx,fontFaces,100
From： https://www.cnblogs.com/aleifighting/p/17984950