HTML5 Canvas 替换为 <div>答案

【问题标题】：HTML5 Canvas replace to <div>HTML5 Canvas 替换为 <div>
【发布时间】：2011-09-10 02:55:33
【问题描述】：

我正在尝试将 HTML5 Canvas 替换为简单的 <div> 但我不知道如何替换这一行：

ctx.drawImage(tileImg[drawTile],xpos,ypos);

也许有人知道如何将其替换为<div>？

示例：http://jsfiddle.net/HDpMW/5/（此代码来自 glacialflame.com）

【问题讨论】：

“简单 HTML”到底是什么意思？
为什么你认为 div 应该知道绘制任意图像？
“替换为 div”是什么意思？
本示例在浏览器支持 Canvas 元素时有效。不，我不认为
可以绘制图像，但图像可以在
元素中绘制（类似于 CSS）。对不起“简单的 HTML”，对不起我的英语。

标签： javascript html html5-canvas drawimage

【解决方案1】：

使用<img> 元素，并像这样动态附加它们：http://jsfiddle.net/HDpMW/6/

var elem = document.createElement('img');
elem.src = tileDict[drawTile];
elem.style.position = 'absolute';
elem.style.left = xpos + 'px';
elem.style.top = ypos + 'px';
ctx.appendChild(elem);

【讨论】：