使用canvas进行游戏的真正好处是什么？

Question

我目前正在画布上阅读，但我发现很难找到使用canvas的实际好处，当使用简单的css覆盖/ JavaScript（+ jquery lib）可以做很多事情时。

这可能是因为我不知道使用画布的全部实用性。

看这个游戏： http://www.pirateslovedaisies.com/

有人可以帮助解释如何以及为什么使用canvas而不仅仅是css？

Answer 1

创建大量的HTML元素非常慢且占用大量内存。 canvas对象用于图形操作，因此针对它进行了优化。除此之外......你将如何使用纯HTML / CSS绘制曲线？ ;）

Answer 2

This是我写的4k js / canvas演示，用于试验2d上下文（here是一个视频，如果你的浏览器不起作用）。我只在chrome，opera，firefox，safari和nexus one browser上测试过它。

请注意，没有加载外部资源（即纹理和光线跟踪的envmap是动态构建的），因此这只是一个自包含的4096字节HTML文件。

你可以用DIV做类似的事情吗？

但实际上我同意你与IMO联系的游戏也可以用DIV完成;显然没有变化 - 即使在坠落的雏菊装载场景中 - 并且海盗的行动区域只是圆圈。不确定，但可能是即使拍摄只发生在固定的角度。

可以使用Canvas代替：

• 绘制一般倾斜线和多边形（地图可以从紧凑的描述中创建，也可以随机生成）。射击可以在任何角度进行......
• 程序图像创建（例如纹理或特殊像素效果）
• 渐变，纹理映射
• 一般2d矩阵变换

当然，使用图像+ DIVs方法的游戏可能更容易制作（很多Photoshop和简单的xy动画）。

Answer 3

使用<canvas>，您可以按像素控制屏幕上显示的内容。您不必处理特定的浏览器CSS或DOM兼容性。

此外，这实际上是与2D非浏览器游戏非常相似的编程模型，例如使用SDL o DirectDraw创建的游戏。

Answer 4

使用Canvas在几个小时内发现a game I wrote;请注意，瓷砖的缩放，线条的抗锯齿，是完美的。对于浏览器调整大小的图像切片，情况并非如此。

单击图块以旋转它们以尝试进行所有连接。单击顶部的按钮行，以获得不同尺寸的新电路板;单击下面的按钮行，以获得具有不同连接数的新电路板。

游戏概念不是我的，只是实现。