HTML 5 - 使用 <img> 元素与画布 drawImage

Question

我正在使用 customHTML 部分，目前我正在使用 canvas html5 元素。现在，我需要显示一个图像，但不确定是在这个画布元素中绘制它还是直接使用 html 元素是个好主意。

我的第一个方法是这样的：

一）

 var customHTML = "<canvas id='viewport'></canvas>"
 var canvas = document.getElementById('viewport'),
 context = canvas.getContext('2d');

 make_base();

 function make_base()
 {
   base_image = new Image();
   base_image.src = 'img/base.png';
   base_image.onload = function(){
   context.drawImage(base_image, 100, 100);
 }

第二种方法：

b)

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

我想知道使用此画布和绘图逻辑是否有任何优势，而不是直接使用 html 元素。表现？资源？

请告诉我 a) 还是 b) 是最好的方法。

我想将此 customHTML 元素用作 Bing 地图中的图钉。

任何帮助将不胜感激。

Answer 1

img 元素从一开始就有效。很久以来也支持PNG图像。另一段代码总是需要 Javascript，并且需要支持 HTML 5 画布的更现代的浏览器。当用例为 a pushpin in Bing Maps 时，其中一些优势可能不适用，因为 Bing 地图将有自己的要求。

一般性能不会有太大差异，甚至可能因浏览器和版本而异。无论如何，绘制图像非常容易（与动画相比），所以我不会担心。

Answer 2

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

将函数分配为事件处理程序，仅在相关图像下载完成时调用。

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

开始下载图像，它可以被视为图像的异步（bon-blocking）调用。

<img src='../images/myicons/pin.png'> 在页面加载时开始绘制，当数据滴入时，您会得到图像的逐行显示。

这些方法之间的区别至少部分是 UI 考虑因素，尤其是大图像和慢速互联网连接。快速连接、小/缓存图像并不是什么大问题。