css - 将 HTML Canvas 设置为页面背景

coder 2023-08-03 原文

我制作了一个 JS 动画，我想作为我主页的背景:http://geotheory.co.uk/ .但我对网络开发还很陌生，不清楚如何阻止 Canvas 元素成为页面上的“内联”对象并将其设置在其他 HTML 元素后面。非常感谢指教。 HTML 是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>geotheory.co.uk</title>
    <style>
        canvas:focus{outline:none;}
        * {
        margin: 0;
        padding: 0;
        }
        h1 {color:#fff;}
        p {color:#fff;}
    </style>

</head>
<body  id="home" bgcolor="black">
    <!-- style="overflow:hidden;" -->
    <h1>Heading</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <script src="processing-1.4.1.min.js"></script>
    <div id="canvasContainer">
    <canvas data-processing-sources="rectangles.pde"></canvas>
    </div>
</body>

最佳答案

2018年我会用

html, body { 
  margin: 0;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}

原因如下:

我曾经推荐canvas { width: 100vw; height: 100vh; ...}但遗憾的是移动浏览器坏了vh所以它没用，而且显然永远没用。参见 this blog post .

display: block;修复了某些浏览器上滚动条的一些问题。一些页面使用 html, body { overflow: none; }但如果您的页面最终需要比屏幕/窗口高，那同样没有意义。

position: fixed;使 Canvas 位置相对于窗口顶部，因此它不会随页面滚动。如果你使用 position: absolute如果页面高于屏幕/窗口，则 Canvas 将从顶部滚动。例如this page .

top: 0; left 0;把它放在左上角。如果没有它，它会默认到它在 body 边缘内的默认位置。通常这可以通过设置 body { margin: 0; } 来解决。但通常这意味着您最终需要一些其他容器来添加边距，否则您的正常内容将位于窗口的边缘。

z-index: -9999;是否有试图强制它比其他任何东西更远，以防页面本身使用一些负值 z-index

这里有一个例子作为片段

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

function resize(canvas) {
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  if (width != canvas.width || height != canvas.height) {
    canvas.width = width;
    canvas.height = height;
  }
}

function render(time) {
  time *= 0.001;
  resize(ctx.canvas);
  ctx.save();
  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  var hw = w / 2;
  var hh = h / 2;
  ctx.clearRect(0, 0, w, h);
  ctx.strokeStyle = "red";
  ctx.translate(hw, hh);
  ctx.rotate(time * 0.1);
  for (var ii = 0; ii < 100; ++ii) {
    ctx.rotate(Math.sin(time * 0.1) * 0.2);
    ctx.strokeRect(-hw, -hh, w, h);
    ctx.scale(0.9, 0.9);
  }
  ctx.restore();

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

html, body {
  margin: 0;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: absolute;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}

<canvas></canvas>
<pre>
  some content that is in front of the canvas
  
  Let's
  
  try
  
  to
  
  make
  
  sure
  
  it's 
  
  long 
  
  enough
  
  that 
  
  we 
  
  can
  
  scroll
  
  down
  
  the 
  
  page
  
  so 
  
  we 
  
  can 
  
  see 
  
  that 
  
  position: fixed;
  
  is
  
  a
  
  better
  
  choice
  
  than
  
  position: absolute;
</pre>

和here's an example outside SO这样您就可以更轻松地查看完整尺寸。

iframe s work as well

请注意，如果您的 Canvas 动画是交互式的，那么 Canvas 前面的元素会占用鼠标/触摸事件。据我所知，没有简单的解决方案。您可以将除 canvas/iframe 之外的所有内容标记为 pointer-events: none并将 Canvas /iframe 标记为 pointer-events: auto但是随后您遇到了无法选择页面上的任何文本并且无法单击任何链接的问题。然后你可以说 set <a>标签有 pointer-events: auto所以链接有效，但我敢肯定这里和那里都会有问题，具体取决于您页面上的信息(尝试复制电子邮件地址或位置地址等...)

关于css - 将 HTML Canvas 设置为页面背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14043359/

有关css - 将 HTML Canvas 设置为页面背景的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
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并在看到包时选择
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

css - 将 HTML Canvas 设置为页面背景

有关css - 将 HTML Canvas 设置为页面背景的更多相关文章

随机推荐