【问题标题】:Should I replace all img elements with the canvas element?我应该用 canvas 元素替换所有 img 元素吗?
【发布时间】:2013-08-18 04:18:12
【问题描述】:

我是 html5 的 canvas 元素的新手。我特别想知道什么时候应该将现有的 img 元素放在画布元素中。

这样做有什么好处或适当的用途?

我一直在阅读 Dive into HTML 5,但并没有完全明白我在他们关于画布主题的结论性声明中所寻找的内容:

简单的答案是,出于同样的原因,您可能想要绘制文本 在画布上。画布坐标图包括文本、线条和 形状;画布上的文字只是更大作品的一部分。一个 更复杂的图表可以很容易地使用 drawImage() 来包含图标, 精灵或其他图形。

【问题讨论】:

    标签: html image canvas


    【解决方案1】:

    图像标签最适合用于静态图像。

    引用 HTML5 工作组的话,Canvas 是“一种依赖于分辨率的位图画布,可用于动态渲染图形、游戏图形或其他视觉图像。”

    因此,您可以将图像放在画布上,但这可能是为了增强您正在创建的其他作品,例如图表或游戏图形。

    更新后更新

    因此,如果您想创建一个实时跟踪股票表现的非常复杂的图表,您可以使用画布绘制图表的各个条形,然后还使用 drawImage() 将公司徽标放在画布来指示哪个栏属于哪个栏。

    【讨论】:

    • 啊,好吧,我认为这更有意义。感谢您的回答!
    • 没问题。如果有帮助,请随时标记为答案:)
    【解决方案2】:

    img 在哪里工作,使用它。 canvas 确实是一个非常强大的工具,但是:

    1. 虽然今天大部分浏览器都支持它,但 img 仍然得到更广泛的支持。
    2. 如果需要迎合禁用JavaScript的用户,canvas不能使用; canvas 需要 JavaScript 才能运行,而 img 不需要。

    也就是说,如果您需要只有 canvas 才能做到的事情,请随意。例如:

    • 您是否需要加载图像,然后让用户对其进行变形或绘图? canvas 在那里会做得很好。
    • 您需要动态绘制一些图表和图形吗? canvas 在那里也可以很好地工作。

    但是,当您不需要 canvas 的更高级功能而只需要显示图像时,img 是最明显和兼容的选择。

    【讨论】:

    • 我明白了——我认为这有帮助。您个人是否曾经需要在画布中放置图像?
    • @Carolann:不是靠自己,不是。我已经在画布中放置了一个图像,然后访问和修改像素数据,但不仅仅是为了显示未修改的图像。
    猜你喜欢
    • 2020-01-08
    • 1970-01-01
    • 2018-04-13
    • 2012-10-24
    • 2012-01-12
    • 1970-01-01
    • 2018-05-07
    • 1970-01-01
    • 2011-06-26
    相关资源
    最近更新 更多