uniapp canvascontext.font属性如何使用

在uniapp中，canvasContext.font属性应该如何设置？我尝试按照官方文档设置字体大小和样式，但实际渲染效果与预期不符。例如设置font: '20px Arial'时，文字显示大小不一致。请问正确的语法格式是什么？是否支持自定义字体？在不同平台（iOS/Android）下是否存在兼容性问题？

2 回复

uniapp中，canvascontext.font属性用于设置字体样式。格式为：fontStyle fontWeight fontSize fontFamily。例如：context.font = 'italic bold 20px Arial'。


在 UniApp 中，canvascontext.font 属性用于设置 Canvas 2D 上下文中的文本样式，包括字体大小、字体系列和字体样式（如粗体、斜体）。它遵循与标准 HTML5 Canvas 相同的语法规则。

语法

canvasContext.font = "font-style font-variant font-weight font-size font-family";
  • font-style：可选，如 normal、italic。
  • font-variant：可选，如 normal、small-caps（UniApp 中可能支持有限）。
  • font-weight：可选，如 normal、bold。
  • font-size：必需，指定字体大小（如 16px）。
  • font-family：必需，指定字体系列（如 Arial、sans-serif）。

使用步骤

  1. 获取 Canvas 上下文。
  2. 设置 font 属性。
  3. 使用 fillText() 或 strokeText() 绘制文本。

示例代码

// 在 UniApp 的 Vue 文件中
export default {
  onReady() {
    // 获取 Canvas 上下文（假设 Canvas 的 id 为 "myCanvas"）
    const ctx = uni.createCanvasContext('myCanvas');
    
    // 设置字体：斜体、粗体、20px 大小、Arial 字体
    ctx.font = 'italic bold 20px Arial';
    
    // 设置文本颜色
    ctx.fillStyle = '#000000';
    
    // 绘制文本（位置：x=50, y=50）
    ctx.fillText('Hello UniApp!', 50, 50);
    
    // 执行绘制
    ctx.draw();
  }
}

注意事项

  • 兼容性：UniApp 中 Canvas 2D 基于小程序标准，部分 CSS 字体属性（如 font-variant）可能不支持。
  • 字体可用性：依赖运行环境（如小程序或 H5）的默认字体，自定义字体需通过 uni.loadFontFace 加载。
  • 单位：font-size 必须包含单位（如 px），否则可能不生效。

通过以上步骤，您可以轻松设置 Canvas 文本样式。如有更多问题，欢迎继续提问！

回到顶部