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

Question

我正在使用customHTML部分,目前我正在使用canvas html5元素.现在,我需要显示一个图像,但不确定在这个canvas元素中绘制它或者直接使用<img> 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'>"

我想知道使用这个画布和绘图逻辑是否有任何优势,而不是直接使用<img> html元素.性能？资源？

如果a)或b)是最好的方法,请告诉我.

我想将这个customHTML元素用作Bing Maps中的图钉.

任何帮助将不胜感激.

Answer 1

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

在一般性能方面,没有太大差异,甚至可能在浏览器和版本之间有所不同.无论如何绘制图像相当容易(比如动画),所以我不担心它.