我意识到 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 上正确显示?
最佳答案
您可能会创建一个基本的递归函数,以下降到
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 或更愿意控制渲染,这可能是您正在寻找的解决方案。
注意:我会说代码没有检测到
关于javascript - 如何让 HTML5 Canvas 显示 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32789953/