草庐IT

html - Canvas 是否会在每次发生任何变化时重新绘制自己？

coder 2023-08-06 原文

我对 Canvas 的工作原理做了一些研究。它应该是“立即模式”意味着它不记得它的绘图是什么样子，每次发生任何变化时只保留位图。

这似乎表明 canvas 不会在发生变化时重新绘制自身。
但是，当我在 iPad 上测试 Canvas 时(基本上我一直在 Canvas 上绘制平行线)，当 Canvas 上有更多线条时，帧速率会迅速降低。线条的绘制速度更慢，而且更跳跃。

这是否意味着 Canvas 实际上必须在更改时绘制整个内容？或者还有其他原因导致这种性能变化？

最佳答案

HTML Canvas 会在每次调用笔划/填充后记住像素的最终状态。它从不重绘自己。 (Web 浏览器可能需要将最终图像的部分重新 blit 到屏幕，例如，如果另一个 HTML 对象在 Canvas 上移动然后再次离开，但这与重新发出绘图命令不同。

上下文总是记住它的当前状态，包括你已经积累的任何路径。您可能(不小心)没有清除“刷新”之间的路径，因此在第一帧画一条线，在第二帧画两条线，在第三帧画三线，等等。 (你在调用 ctx.closePath() 和 ctx.beginPath() 吗？你在清除绘图之间的 Canvas 吗？)

这是 an example显示 Canvas 不会重绘自身。即使在数万行时，我看到的帧速率也与数百行相同(当每帧绘制 10 行时，在 Chrome 上上限为 200fps，在 Firefox 8.0 上上限为 ~240fps)。

var lastFrame = new Date, avgFrameMS=5, lines=0;
function drawLine(){
  ctx.beginPath();
  ctx.moveTo(Math.random()*w,Math.random()*h);
  ctx.lineTo(Math.random()*w,Math.random()*h);
  ctx.closePath();
  ctx.stroke();
  var now = new Date;
  var frameTime = now - lastFrame;
  avgFrameMS += (frameTime-avgFrameMS)/20;
  lastFrame = now;
  setTimeout(drawLine,1);
  lines++;
}
drawLine();

// Show the stats infrequently
setInterval(function(){
  fps.innerHTML = (1000/avgFrameMS).toFixed(1);
  l.innerHTML = lines;
},1000);

在行动中看到:http://phrogz.net/tmp/canvas_refresh_rate.html

有关您的代码实际在做什么以及您怀疑它在做什么的更多反馈，请与我们分享您的测试用例。

关于html - Canvas 是否会在每次发生任何变化时重新绘制自己？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8169663/

CanvashtmlsectionavgFrameMS

有关html - Canvas 是否会在每次发生任何变化时重新绘制自己？的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

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

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

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  5. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  6. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  10. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

随机推荐