Bismon项目：如何用jQuery+jCanvas在Canvas中添加指定CSS样式的文本

嘿，针对你在Bismon（欧盟H2020资助的GPLv3+软件，git版本0e9a8eccc2976f）里遇到的这个需求——在Canvas中绘制和span.bmcl_evalprompt样式一致的文本，我可以明确告诉你：这个需求完全可以实现，而且针对你指定的Linux平台Firefox 68+环境，有几种实用方案可选，下面详细给你拆解：

方案一：视口外隐藏元素法（你的初始设想） #

你的思路其实挺靠谱的，而且兼容性拉满，完全适配你当前用的jQuery 3.4版本：

• 只需要创建一个定位到视口外的span元素，既不会影响页面布局，也不会被用户看到，比如给它加position: fixed; left: -10000px; top: -10000px;的样式
• 用jQuery快速创建并插入DOM，然后提取样式：

  // 创建隐藏的样式参考元素
  const $refSpan = $('<span class="bmcl_evalprompt">测试文本</span>').css({
    position: 'fixed',
    left: '-10000px',
    top: '-10000px',
    margin: 0,
    padding: 0,
    border: 'none'
  }).appendTo('body');
  
  // 获取精准的样式属性（包括继承的样式）
  const fontProps = {
    fontFamily: $refSpan.css('font-family'),
    fontSize: $refSpan.css('font-size'),
    fontWeight: $refSpan.css('font-weight'),
    color: $refSpan.css('color')
  };
  
  // 如果需要计算文本在Canvas中的占位尺寸，也可以直接获取
  const textWidth = $refSpan.width();
  const textHeight = $refSpan.height();
  
  // 用完可以直接移除元素，也可以保留着复用
  $refSpan.remove();
  

• 这个方法的最大优势是能精准获取所有样式，包括那些从父元素继承来的属性（比如字体可能继承自body），不会有任何遗漏

方案二：直接解析CSS规则（更高效的无DOM方案） #

如果你不想额外操作DOM，也可以直接读取页面的CSS规则，提取.bmcl_evalprompt的样式：

• 利用document.styleSheets结合jQuery来遍历并提取规则，代码示例如下：

  function getClassStyle(className) {
    let styleProps = {};
    // 遍历页面所有样式表
    $.each(document.styleSheets, function(i, sheet) {
      try {
        // 遍历当前样式表的所有规则
        $.each(sheet.cssRules || sheet.rules, function(j, rule) {
          if (rule.selectorText && rule.selectorText.includes(className)) {
            // 提取需要的样式属性，已有的属性不会被覆盖
            styleProps.fontFamily = rule.style.fontFamily || styleProps.fontFamily;
            styleProps.fontSize = rule.style.fontSize || styleProps.fontSize;
            styleProps.fontWeight = rule.style.fontWeight || styleProps.fontWeight;
            styleProps.color = rule.style.color || styleProps.color;
          }
        });
      } catch(e) {
        // 跨域样式表会抛出错误，直接跳过即可
      }
    });
    // 补充默认值（如果CSS类里没定义的话，继承body的样式）
    styleProps.fontFamily = styleProps.fontFamily || $('body').css('font-family');
    styleProps.fontSize = styleProps.fontSize || $('body').css('font-size');
    return styleProps;
  }
  
  // 获取.bmcl_evalprompt的样式
  const fontProps = getClassStyle('.bmcl_evalprompt');
  

• 注意：如果你的.bmcl_evalprompt类已经定义了所有需要的样式（字体、颜色等），这个方案会更高效，不需要创建额外的DOM元素；如果有继承的样式，记得补充默认值就行

结合jCanvas绘制文本 #

拿到样式后，用jCanvas在Canvas上绘制文本就非常简单了，示例代码如下：

// 假设你的Canvas元素ID是#bismon-canvas
$('#bismon-canvas').drawText({
  fillStyle: fontProps.color,
  fontFamily: fontProps.fontFamily,
  fontSize: fontProps.fontSize,
  fontWeight: fontProps.fontWeight,
  text: '你需要绘制的文本内容',
  x: 50, // 文本的X坐标
  y: 50  // 文本的Y坐标
});

兼容性说明 #

针对你指定的Linux平台Firefox 68+：

• 两种方案都完全兼容，Firefox 68支持document.styleSheets的cssRules属性，也完美适配jQuery 3.4和jQuery UI 1.12.1
• jCanvas和jQuery的配合在这个环境下没有任何问题

内容的提问来源于stack exchange，提问作者Basile Starynkevitch