javascript - 如何让 HTML5 Canvas 显示 HTML？

Question

我意识到 Canvas 不能直接呈现 HTML。但是，似乎有潜在的解决方法。我不需要 HTML 来完美呈现，但我至少想要呈现的 HTML 的图像。

为此，我尝试将 HTML 转换为 SVG。这适用于非常基本的 html，但会破坏许多用例(例如在 html 中包含图像):

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();

var data =  '<svg xmlns="http://www.w3.org/2000/svg" width="' + screen.width + '" height="' + screen.height + '">' +
            '<foreignObject width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml">' +
            document.body.innerHTML + 
            '</div></foreignObject></svg>'

var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img,0,0,c.width,c.height);
    DOMURL.revokeObjectURL(url);
}
img.src = url;

有没有更简单的方法让 html 在 Canvas 上正确显示？

Answer 1

您可能会创建一个基本的递归函数，以下降到 元素的子元素中，该元素使用开关或事件处理程序对象来处理某些元素。我在这里演示前者:

var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');

ctx.clearRect( 0, 0, canvas.width, canvas.height );

var y = 50; //Set to largest text
var offset = 25;

(function descend(parent){
  for( var i = 0; i < parent.childNodes.length; i++ ){
    var child = parent.childNodes[i];
    
    var name = child.tagName;
    var val  = child.innerHTML;
    
    if( child.hasChildNodes() ) descend(child);
    
    switch( name ){
      case 'H1':
        ctx.font = "normal 48px Arial";
        y += 25;
        ctx.fillText( val, offset, y );
        y += 25;
        break;
      case 'H2':
        ctx.font = "normal 36px Arial";
        y += 20;
        ctx.fillText( val, offset, y );
        y += 20;
        break;
      case 'H3':
        ctx.font = "normal 24px Arial";
        y += 12;
        ctx.fillText( val, offset, y );
        y += 12;
        break;
      default:
        break;
    }
  }
})( canvas );

<canvas id="canvas" width="300" height="300"><h1>H1</h1><h2>H2</h2><h3>H3</h3></canvas>

这段代码利用一个函数来进入元素的元素树，并使用不同的渲染技术处理某些元素。这可能看起来有点过分，但如果您正在寻找一种有效的方法来实现该目标，那么这种方法是可行的。特别是渲染的灵 active ，即你可以选择如何渲染你想要的元素，所以如果你出于某种原因想要渲染所有 的红色，你可以这样做。我提供的功能非常基本，仅渲染

-

，当您开始在 中混合它们时，它会出现一点“渲染不稳定”。但它很好地展示了这个概念，我认为您可能会发现它很有效。

虽然评论中发表的想法绝对令人钦佩，但如果您正在寻求灵 active 或更愿意控制渲染，这可能是您正在寻找的解决方案。

注意:我会说代码没有检测到 元素的 DOM 中的更新；你需要一个突变观察者。您可能还希望将代码放在加载页面时运行的函数中，以便 JavaScript 运行时实际上可以找到您的 元素。