使用画布进行游戏的真正好处是什么？
我目前正在阅读画布，但我发现很难找到使用画布的实际好处，因为使用简单的 css 覆盖/JavaScript（+ jquery lib）可以完成很多工作。
这可能是因为我不知道使用画布的全部实用性。
看看这个游戏： http://www.pirateslovedaisies.com/
有人可以帮助解释一下如何以及为什么使用画布而不是使用画布吗？只是CSS？
I'm currently reading up on the canvas, but I'm finding it hard to find practical benefits of using canvas, when a lot can be done using simple css overlays/JavaScript (+ jquery lib).
This is probably because I don't know the FULL practicalities of using canvas.
Looking at this game:
http://www.pirateslovedaisies.com/
Could someone help explain how and why canvas is being used as opposed to just css?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是一个 4k js/canvas 演示，我编写用于试验 2d 上下文 (这里是一个视频（如果您的浏览器无法正常工作）。我只在 chrome、opera、firefox、safari 和 Nexus One 浏览器上进行了测试。
请注意，没有加载任何外部资源（即动态构建纹理和光线追踪环境贴图），因此这只是一个独立的 4096 字节 HTML 文件。
你可以用 DIV 做类似的事情吗？
但事实上，我同意你在 IMO 中链接的游戏也可以用 DIV 来完成；显然，没有任何变形——甚至在雏菊掉落的加载场景中也没有——而且海盗的行动区域只是圆形。不确定，但可能即使拍摄也只能在固定角度进行。
画布可以用于：
当然，使用图像+DIV 方法的游戏可能更容易制作（很多 Photoshop和简单的 xy 动画）。
This is a 4k js/canvas demo I wrote to experiment with the 2d context (here is a video if your browser doesn't work). I tested it only on chrome, opera, firefox, safari and nexus one browser.
Note that no external resources are loaded (i.e. the texture and the raytraced envmap are built dynamically), so this is just a single self-contained 4096 bytes HTML file.
You can do something like that with DIVs?
But indeed I agree that the game you linked IMO could be done also with DIVs; apparently there are no transformations - not even in the falling daisy loading scene - and the action areas for the pirates are just circles. Not sure but could be that even shooting only happens at fixed angles.
Canvas could have been used instead for:
Of course a game using an image+DIVs approach is probably way easier to make (a lot of photoshop and simple xy animation).
创建大量 HTML 元素的速度非常慢并且非常消耗内存。画布对象是为图形操作而设计的，因此对其进行了优化。除此之外......你如何用纯 HTML/CSS 绘制曲线？ ;)
Creating tons of HTML elements is extremely slow and memory-hungry. The canvas object is made for graphics operations and thus optimized for it. Besides that.. how would you draw a curve with plain HTML/CSS? ;)
使用
您可以对屏幕上显示的内容进行逐像素控制。您不必处理特定浏览器的 CSS 或 DOM 兼容性。此外，这实际上是与 2D 非浏览器游戏非常相似的编程模型，例如使用 SDL 创建的游戏o DirectDraw。
Using
<canvas>you have a per-pixel control of what's shown on the screen. You don't have to deal with specific browser CSS or DOM compatibility.Also, that's actually a pretty similar programming model to 2D non-browser games, like those created using SDL o DirectDraw.
这是我在几个小时内使用 Canvas 编写的一款游戏；请注意，图块的缩放、线条的抗锯齿都是完美的。对于浏览器调整大小的图像图块来说，情况并非如此。
单击图块以旋转它们以尝试建立所有连接。单击顶部的一排按钮即可获得不同尺寸的新板；单击该按钮下方的行按钮即可获得具有不同连接数的新板。
游戏概念不是我的，只是实现。
Here's a game I wrote in a few hours using Canvas; note that the scaling of the tiles, the anti-aliasing of the lines, is perfect. This would not be the case with image tiles that were being resized by the browser.
Click the tiles to rotate them in an attempt to make all connections. Click the row of buttons at the top for a new board of a different size; click the row of buttons below that for a new board with different numbers of connections.
The game concept is not mine, only the implementation.