草庐IT

javascript - 我可以使用 p5js 在同一页面上创建多个 Canvas 元素吗

coder 2024-05-11 原文

我尝试使用 p5js 绘制一些点，它确实工作得很好，但我还想要另一个可以显示来自相机的实时视频的 Canvas 元素。当我添加另一个 Canvas 元素时，第一个 Canvas 变为空白。现在我尝试使用多个 javascript 文件来处理不同的 Canvas 。

相机.js

var capture;

function setup() {
  var video=createCanvas(390, 240);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  capture.hide();
  //set parent to div with id left
  video.parent("left");
}

function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter('INVERT');
}

绘制形状.js

function setup() {
  // Create the canvas
  var plot=createCanvas(720, 400);
  background(200);
  //set parent to div with id right
  plot.parent("right");
  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}

index.html

<div class="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

最佳答案

你会想要使用 instance mode .前几个示例使用全局模式，接下来的几个示例使用实例模式。在实例模式下，您可以控制 p5js 放置 Canvas 元素的位置，而不是使用默认 Canvas 。如果您有两个容器，您将使用:

new p5(leftSketch, 'left'); new p5(rightSketch, '右');

leftSketch 和 rightSketch 将是采用变量 p 的函数。该变量是 p5js 的一个实例，您可以分别控制每个 Canvas 元素。

关于javascript - 我可以使用 p5js 在同一页面上创建多个 Canvas 元素吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37240287/

javascriptCanvascodesectionjqueryhtml5-canvas

有关javascript - 我可以使用 p5js 在同一页面上创建多个 Canvas 元素吗的更多相关文章

  1. 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

  2. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  3. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  4. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  5. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  6. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 我可以删除 Ruby 中的方法别名吗？ - 2

    假设我有一段Ruby代码，我想在其中为一个方法设置别名(我不知道为什么；让我们假设我有一个很好的理由)。classStringalias_method:contains?,:include?end我可以在本节之后删除这个别名吗？ 最佳答案 remove_method在大多数情况下应该有效。但是，如果您的alias_method覆盖了现有方法，您可能需要通过单独的alias_method调用来保存原始方法。#assuming:contains?isalreadyamethodalias_method:original_contains

  8. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  9. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  10. ruby - 我可以使用 RVM 为所有用户维护单一版本的 Ruby 吗？ - 2

    我喜欢RVM。我意识到它的主要用例是让不同的用户在不同版本的Ruby之间切换。但是假设我正在将Rails应用程序部署到服务器，并且我只想运行单个版本的Ruby。特别是，我想要1.9.2，用RVM安装它很容易，但没有它就很痛苦。有没有一种方法可以让我说“我希望这是所有用户的规范Ruby安装”(连同它的所有gem)，而不必手动创建一堆符号链接(symboliclink)并在每次更新到更新时更改它们Ruby版本？ 最佳答案 以root身份安装RVM并执行sudorvmuse1.9.2--default。任何采购/usr/local/rvm

随机推荐