HTML 5-使用< img>元素与画布drawImage [英] HTML 5 - Use <img> element vs. Canvas drawImage

问题描述

我正在使用customHTML部分，当前正在使用canvas html5元素.现在，我需要显示一个图像，但不确定将其绘制在此canvas元素中还是使用< img> html元素.

I'm working with a customHTML section, currently I'm using a canvas html5 element. Now, I need to display an image, but not sure if it will be a good idea to draw it in this canvas element or use a <img> html element directly.

我的第一种方法是:

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

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

I would like to know if there is any advantage in using this canvas and drawing logic, instead of using directly an <img> html element. Performance? Resources?

请让我知道a)或b)是最好的方法.

Please, let me know if a) or b) is the best approach.

我想使用此customHTML元素作为Bing Maps中的图钉.

I want to use this customHTML element as a pushpin in Bing Maps.

任何帮助将不胜感激.

推荐答案

img元素自黎明起就起作用. Png图像支持也已经很长时间了.另一段代码始终需要Javascript，并且需要支持HTML 5 canvas的更现代的浏览器.当用例为a pushpin in Bing Maps时，其中某些优势可能不适用，因为Bing Maps将对其有自己的要求.

The img element works since the dawn of time. Png image support also since a very long time. The other piece of code always needs Javascript, and needs a more modern browser that supports HTML 5 canvas. Some of these advantages may not apply when the usecase is a pushpin in Bing Maps, since Bing Maps will have requirements on its ownn.

在总体性能上不会有太大差异，并且甚至在浏览器和版本之间也可能有所不同.无论如何，绘制图像都非常容易(与动画相比)，所以我不用担心.

In general performance there won't be much difference, and this may even vary between browsers and versions. Drawing an image is pretty easy anyway (compared to, say, animation), so I wouldn't worry about it.

这篇关于HTML 5-使用&lt; img&gt;元素与画布drawImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！