主页 / 问题 / 1147211
Accepted
Mike Kharkov
Asked:2020-06-30 05:55:38 +0000 UTC2020-06-30 05:55:38 +0000 UTC

使用 Canvas 的策略是什么？

  • 772

我对画布表面上很熟悉——
当我第一次见面时，我在使用 vue.js 的上下文中遇到了这样一个指南：使用 Vue.js
控制 HTML5 画布


问题：

  1. 这种方法是否允许您使用画布层 - 就像使用普通的房屋元素一样？
    （到目前为止，这在实践中还没有实现）

  2. 从答案很可能是“否”的理解来看 - 以下问题如下：
    在编写代码的方法方面存在哪些策略 - 在任务是否有 100500 个不同层的上下文中，当单击哪个层时，一些应该采取什么行动？
    您如何将事件挂在单独的图层上（使用您自己的个人坐标）？（例如，画布只有 1。）

  3. 如果您在没有额外库的情况下工作 - 首先应该注意哪些点 - 以加快和优化您的工作？（也许有一些模式，例如，不是 2d 上下文，而是 WebGl - 这会更快，等等）
javascript

1 个回答

  1. Best Answer

    这种方法是否允许您使用画布层 - 就像使用普通的房屋元素一样？

    画布是具有所有后果的画布。你可以在上面画一些东西或擦除一些东西。所有图层都必须保存在内存中js 并根据需要重新绘制。

    就代码编写方法而言，存在哪些策略——如果任务是有 100,500 个不同的层，当点击哪个层时，应该发生一些动作？

    这一切都取决于任务。当你点击时，canvas你只能得到点击的坐标，其他什么都没有。您必须自己实现其余逻辑或使用现成的库。要记住的主要事情是，不同平台上的不同浏览器对同时存在的视图数量canvas及其大小有不同的限制，因此有时您必须采用不同的技巧：https ://webglfundamentals.org/webgl/lessons/ webgl-multiple-views.html

    如果您在没有额外库的情况下工作 - 首先应该注意哪些点 - 以加快和优化您的工作？

    请注意，canvas它对物理像素一无所知，并且在您使用的设备上，devicePixelRatio > 1您必须将大小增加canvas一定数量devicePixelRatio并调整大小以适应css.

    就性能而言，没有通用的方法canvas，在某些平台上，在多个平台上绘制图像的背景更便宜，在其他平台上，在一个平台上canvas绘制所有内容更便宜，在第三个平台html上它将canvas是最佳选择。这将需要一个漫长而乏味的测试。

    WebGl它肯定会更快，因为渲染器将立即在视频卡上，但是在它上面，例如，渲染字体是相当垃圾的。在这种情况下，您必须学习如何编写着色器。我可以推荐一个好的资源：https ://webglfundamentals.org/

    html同步画布也没有合法的方法，而且html速度很慢，在手机上非常明显。如果您达到了像素预算，那么您将获得很多乐趣。

    • 2

相关问题