Javascript HTML 5-使用<；img>；元素与画布绘图图像

我正在使用customHTML部分，目前我正在使用canvas html5元素。现在，我需要显示一个图像，但不确定在这个画布元素中绘制图像或使用 第二种方法：

（b）

var customHTML=“”

我想知道使用这种画布和绘图逻辑而不是直接使用html元素是否有任何优势。演出资源

请告诉我a）或b）是不是最好的方法

我想在Bing地图中将这个customHTML元素用作图钉

---

任何帮助都将不胜感激。

img元素从时间的黎明就开始工作。Png图像支持也由来已久。另一段代码总是需要Javascript，并且需要支持HTML5画布的更现代的浏览器。当用例是Bing地图中的图钉时，这些优点中的一些可能不适用，因为Bing地图本身就有需求

一般来说，性能不会有太大差异，甚至在浏览器和版本之间也可能有所不同。无论如何，画一个图像是相当容易的（比如说，与动画相比），所以我不会担心它

 var customHTML = "<img src='../images/myicons/pin.png'>"

将函数指定为事件处理程序，仅当相关映像完成下载时才会调用该函数

base_image.onload = function() {
  context.drawImage(base_image, 100, 100);
}

开始下载映像，这可能被视为映像的异步（bon阻塞）调用。

当页面加载时开始绘图，当图像的数据慢慢进入时，您将获得图像的逐行显示

---

这些方法之间的差异至少在一定程度上是出于用户界面的考虑，尤其是对于大图像和缓慢的互联网连接而言。快速连接、小图像/缓存图像并没有太大问题。

+1是的，使用img+CSS满足这一要求非常简单。画布的一个优点是，使用外部图像作为线条图的背景，那么你的意思是，如果你想在照片加载完成后处理它，那么第一种方法会更好？比如说，如果我想得到它的高度和宽度，那么对它进行调整，那么在做这些事情之前需要加载照片？

base_image.onload = function() {
  context.drawImage(base_image, 100, 100);
}

base_image.src = 'img/base.png';