javascript - Canvas 预渲染？

coder 2023-08-05 原文

在 Canvas 上预渲染图像有什么意义吗？

一个例子，

var img; // Img object

var pre = document.createElement("canvas");
pre.width = img.width;
pre.height = img.height;
var precon = pre.getContext("2d");

precon.drawImage(img, 0, 0);

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

for(var i =0; i < 10000; ++i) {
    ctx.drawImage(pre, Math.random() * canvas.width, Math.random() * canvas.height);
}

我不明白这一点，因为无论您做什么，您仍在调用 context.drawImage，除非 Canvas api 从 Canvas 对象而不是图像对象绘制图像更快？

最佳答案

首先，我必须说你的例子不适合强调 Canvas 预渲染的需要和好处。

我会给你一个更好的例子，你需要在 Canvas 上多次绘制需要大量计算的东西。

假设您有这个draw 函数:

function complexDraw(ctx){
    ctx.drawImage(img, width, height);
    // heavy computation goes here
    // some transforms maybe
    ctx.ctx.setTransform(-1, 0, 0, 1, 200, 200);   
    ctx.fillStyle = "rgba(100, 100, 255, 0.5)";   
    ctx.fillRect(50, 50, 100, 100); 
    //maybe draw another img/video/canvas
    ctx.drawImage(anotherImg, width, height);
    // ...
}
function draw(){
    complexDraw(ctx);
}

现在假设您也想在 Canvas 上显示当前时间。这意味着我们要在 draw 函数的底部添加它:

function drawTime(ctx){
    ctx.fillText(new Date().getTime(), 10, 50); 
}

现在我们的绘图函数看起来像这样:

function draw(){
    complexDraw(ctx);
    drawTime(ctx);
}

因为你想一直显示当前时间，你需要每秒调用一次draw函数:

setInterval(draw, 1000);

这实际上意味着每一秒你都在做一些繁重的计算来更新一个愚蠢的小文本。

如果有一种方法可以拆分 draw 函数并只计算需要计算的东西(那些改变的东西)......但是有:向 Canvas 预渲染问好!

关键思想是在单独的 Canvas 上绘制不会改变(并且不需要重新计算)的部分 - 我们称之为 cacheCanvas - 并复制它的内容每当我们想重绘东西时在我们应用程序的 Canvas 上:

// suppose we have a `clone` function
var cacheCanvas = clone(canvas),
    cacheCtx = cacheCanvas.getContext('2d');

// let's draw our complex stuff on the cacheCanvas
complexDraw(cacheCtx);

// modify our main `draw` function to copy the result of the `complexDraw`
// function, not to call it
function draw(){
    ctx.drawImage(cacheCanvas, width, height);
    drawTime();
}

现在我们基本上每秒都在重绘整个 Canvas ，但我们并没有重新计算 complexDraw 中的所有繁重工作。

我只想指出，如果不通过预渲染提高性能，大多数基于 Canvas 的游戏无法以 60fps(重绘每秒 60 次)运行或另一种称为 Canvas 分层的技术(也值得研究)。

关于javascript - Canvas 预渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17235748/

有关javascript - Canvas 预渲染？的更多相关文章

ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
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的路径中定义。这
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2
我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby-on-rails - 使用 header 渲染 JSON - 2
我想在我的Controller中使用以下corsheader呈现JSON:'Access-Control-Allow-Origin'='*'.我试过这个:defmy_actionrender(json:some_params)response.headers['Access-Control-Allow-Origin']='*'end但是我得到了一个AbstractController::DoubleRenderError。有没有办法使用header呈现JSON？最佳答案您不能在渲染后设置header，因为已发送响应。所以在没有意
ruby-on-rails - Ruby 数组到 JSON 和 Rails JSON 渲染 - 2
我有一个Ruby数组，如何在Rails3.0中将其呈现为JSONView？我的Controller方法是defautocomplete@question=Question.allend 最佳答案如果自动完成操作仅呈现JSON，您可以将re5et的解决方案简化为:defautocompletequestions=Question.allrender:json=>questionsend(请注意，我将“问题”复数化以反射(reflect)它是一个数组并删除了@符号-一个局部变量就足够了，因为您可能只使用它来呈现内联JSON)作为一种附
javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？最佳答案如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

javascript - Canvas 预渲染？

有关javascript - Canvas 预渲染？的更多相关文章

随机推荐