草庐IT

javascript - 绘制到 HTML 5 Canvas 的最快方法是什么？

coder 2024-05-10 原文

我正在研究仅使用 HTML 的 Canvas 作为显示媒体制作游戏的可能性。以我需要完成的示例任务为例，我需要从多个等距图 block 构建游戏环境。当然，在 2D 中工作意味着它们必须采用矩形包装，因此图 block 之间有很大的重叠。

我已经足够大了，这个问题的自然解决方案是调用 BitBltMasked。哦等等，不，HTML Canvas 没有像 BitBlt 这样简单和令人愉悦的东西。似乎将像素数据转储到 Canvas 中的唯一方法是使用没有忽略 alpha channel 的有用绘图模式的 drawImage() 或使用在数组中具有图像数据的 ImageData 对象。使用权。是。界限。检查。和。所以。狗。慢。

好吧，这与其说是一个问题，不如说是一个咆哮(W3C 之类的事情往往会激起我的兴趣)，但我真正想知道的是如何快速绘制到 Canvas 上？我发现很难摆脱这种感觉，即每秒执行 100 次 drawImages()，每次绘制都尊重 alpha channel 本质上是有罪的，并且可能使我的应用程序在许多浏览器中表现得像屁股一样。另一方面，正确实现 BitBlt 的唯一方法在很大程度上依赖于使用类似热点的执行技术的浏览器来使其快速运行。

有什么方法可以在所有可能的实现中快速绘制，还是我只需要忘记性能？

最佳答案

这是一个非常有趣的问题，您可以做一些有趣的事情来解决它。

首先，您应该知道 drawImage 可以接受 Canvas，而不仅仅是图像。 “子 Canvas ”es 甚至不需要在 DOM 中。这意味着您可以在一个 Canvas 上进行一些合成，然后将其绘制到另一个 Canvas 上。这打开了一个充满优化机会的世界，尤其是在等距图 block 的情况下。

假设您有一个长 50 格、宽 50 格的区域(为了我自己的理智，我会说米)。您可以将该区域划分为 10x10 米的 block 。每个 block 都由它自己的 Canvas 表示。要绘制完整场景，您只需将每个 block 的 Canvas 对象绘制到显示给用户的主 Canvas 上。如果只有四个 block (一个 20x20m 的区域)，您将只执行四个 drawImage 操作。

当然，每个单独的 block 都需要渲染自己的 Canvas 。在 block 中没有发生任何事情的游戏时间刻度上，您只需不做任何事情:Canvas 将保持不变并按照您的预期进行绘制。当某些事情确实发生变化时，您可以根据自己的游戏执行以下操作之一:

  1. 如果您的图 block 延伸到三维(即:您有一个 Z 轴)，您可以将 block 的每个“层”绘制到它自己的 Canvas 中，并且只更新需要更新的层。例如，如果每个 block 包含十层深度，则您将有十个 Canvas 对象。如果更新了第 6 层上的某些内容，您只需要重新绘制第 6 层的 Canvas(可能每平方米一个 drawImage，即 100 个)，然后执行一个 drawImage chunk 中的每层操作(十)重新绘制 chunk 的 Canvas。减少或增加 block 大小可能会增加或减少性能，具体取决于您对游戏环境所做的更新次数。可以进一步优化以消除对模糊图 block 等的 drawImage 调用。
  2. 如果您没有第三维，您可以简单地在每平方米的 block 上执行一个drawImage。如果更新了两个 block ，则每次更新只有 200 次 drawImage 调用(加上屏幕上可见的每个 block 调用一次)。如果您的游戏只涉及很少的更新，则减小块大小会进一步减少调用次数。
  3. 您可以在自己的游戏循环中对 block 执行更新。如果您正在使用 requestAnimationFrame(您应该这样做)，则只需将 block Canvas 对象绘制到屏幕上。独立地，您可以在 setTimeout 循环等中执行游戏逻辑。然后，每个 block 都可以在帧之间的自己的滴答中更新，而不会影响性能。这也可以在 Web Worker 中完成，使用 getImageData 和 putImageData 在需要更新时将渲染的 block 发送回主线程，尽管无缝地完成这项工作将付出很多努力。

您的另一个选择是使用像 pixi.js 这样的库来使用 WebGL 渲染场景。即使对于 2D，它也会通过减少 CPU 需要完成的工作量并将其转移到 GPU 来提高性能。我强烈建议您检查一下。

关于javascript - 绘制到 HTML 5 Canvas 的最快方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8917384/

javascript最快Canvasblockcodeperformancehtml5-canvas

有关javascript - 绘制到 HTML 5 Canvas 的最快方法是什么？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  6. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  9. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  10. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

随机推荐