哪一个更好，使用带有javascript或canvas的纯html

Which one is better, using plain html with javascript or a canvas?

本文关键字：javascript canvas 的纯 html 更好哪一个更新时间：2023-09-26

我最近一直在用html5 canvas开发更多的东西，正如我所看到的，它更多的是JavaScript。那么什么时候应该比纯html更受欢迎呢？我想知道的是，鉴于我必须开发一个像吃豆人这样的游戏，哪一个应该更好用？(可能对于绘图应用程序，画布比使用div 有用得多(

例如，这里有两个 pacman 的实现

我想知道使用 canvas 和 htmldiv 和 js 开发浏览器游戏的利弊。我也想知道什么时候使用canvas更好，什么时候使用纯html和js更好。

如果向后兼容性不是问题，请使用<canvas>，这正是它们的设计目的。

像素数组比为页面上的每个点创建一个 DOM 元素要高效得多。

我相信使用

canvas或html(dom(来做游戏之间的主要区别之一是dom通过提供鼠标事件来帮助你管理对象之间的权衡，或者你自己在JavaScript中管理它们。

如果您将画布用于游戏，则需要自己处理所有鼠标事件，有一些库可以帮助您做到这一点，其中一个库是 EaselJS。此库将帮助您轻松地将侦听器添加到画布中的对象。

显然不需要将所有对象都放在 dom 中，如果您需要任何滚动等，您将获得巨大的性能优势。以 Google Maps 融合表图层为例，它们可以使用画布在地图上渲染 1000 多个标记并保持出色的用户体验，这是使用 dom 时无法实现的。

因此，这一切都与权衡，库和更多代码有关，以在画布中管理对象 - 但获得性能奖励，或在html(dom(中易于开发，但可能对许多对象造成性能影响。

对于一个简单的2D游戏，我会走画布的方式。

对于3D游戏，你必须看看WebGL(这是opengl的原生浏览器实现(，可能还有一个像copperlicht这样的webgl引擎，它将为你包装webgl api。你也可以用WebGL做2D游戏，如果你的2D游戏图形繁重，webgl会比画布快。

当然，还有Flash解决方案，但我不会那样做。

编辑：从理论上讲，您也可以仅使用画布制作3D游戏，但这意味着重新发明轮子(转换等(

图形的HTML和DOM很慢，但它们可以在较旧的浏览器中工作。

Canvas 非常快，但只能在现代浏览器中工作。

因此，如果您的目标群体是现代智能手机或现代浏览器，那么一定要选择画布！此外，如果您需要某些特殊效果或粒子，那么除了使用 Canvas 之外别无他法，因为这无法真正使用 DOM 完成。

也许SVG可能是您的选择？它不像纯html那样混乱，它不适合游戏，但提供了更好的浏览器支持。SVG还有一个很好的框架：拉斐尔。我自己使用SVG来实现一些游戏。(风险，俄罗斯方块...