canvas 文本样式处理

Surplus9

已于 2023-07-28 10:46:18 修改

阅读量111

点赞数

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

于 2023-07-28 10:21:10 首次发布

本文链接：https://blog.csdn.net/weixin_45414741/article/details/131974655

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该代码段展示了如何在HTML5Canvas上处理文本样式，包括使文本居中和实现自动换行。它使用了`measureText`方法来测量文本宽度，并动态调整坐标以达到居中效果。此外，还通过遍历文本并检查宽度来处理换行。

摘要由CSDN通过智能技术生成

canvas 文本样式处理

文本居中和自动换行

var _self = this
var _canvas = document.createElement('canvas');
var _context = _canvas.getContext("2d")
_canvas.width = 500
_canvas.height = 600

//调用示例
var _obj = {
    ontList: '测试文案',
    isCenter: false,
    top: 120,
    leftAndright: 10,
    lineH: 13,
    lineW: 0,
    font: '30px Courier New',
    fillStyle: 'black'
}
determineNumberRows(_obj)

//fontList：文本内容 ,
//isCenter: 不满一行是否要文本居中,
//top: 距顶部高度,
//leftAndright:左右边距,
//lineH: 行高，
//lineW，文字的间距
function determineNumberRows(_obj,_w = _obj.leftAndright + _obj.lineW / 2) {
   _context.font = _obj.font
   var _font_w = _context.measureText('例').width + _obj.lineW / 2
   var _h = _obj.top + _font_w
   var _k = false
   _context.fillStyle = _obj.fillStyle
   if(_obj.isCenter) _w = (_canvas.width - _obj.fontList.split('').length * (_font_w  + _obj.lineW / 2) + _obj.leftAndright * 2) / 2
          _obj.fontList.split('').forEach((T,I)=> {
          if(_obj.isCenter && _canvas.width > (_obj.fontList.split('').length * (_font_w  + _obj.lineW / 2) + _obj.leftAndright)) {
                   if(_k) _w += _font_w + _obj.lineW / 2
                           _k = true
           } else {
                  if(_canvas.width <= _w + _font_w + _obj.leftAndright + _obj.lineW / 2) {
                      _h += _font_w + _obj.lineH
                      _w = _obj.leftAndright + _obj.lineW / 2
                  } else {
                      if(_k) _w += _font_w + _obj.lineW / 2 
                            _k = true
                  }
          }
          _context.fillText(T,_w,_h);
      })
      _self.base64 = _canvas.toDataURL("image/png")
}