Question

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

我的第一个方法是：

a）

 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'>"

我想知道使用这个画布和绘图逻辑是否有任何优势，而不是直接使用＆lt; img＆gt; HTML元素。性能？资源？

如果a）或b）是最好的方法，请告诉我。

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

任何帮助将不胜感激。

Answer 1

img元素从一开始就有效。 Png图像支持也很长一段时间。另一段代码总是需要Javascript，需要一个支持HTML 5 canvas的更现代的浏览器。当用例为a pushpin in Bing Maps时，其中一些优势可能不适用，因为Bing Maps对其自身有要求。

总的来说，性能差异很大，甚至可能因浏览器和版本而异。无论如何绘制图像非常容易（比如动画），所以我不担心它。

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考虑因素，尤其是大图像和慢速互联网连接。与快速连接，小/缓存图像无关。

HTML 5 - 使用<img/>元素与Canvas drawImage

2 个答案: