我的页面背景中能否添加一个HTML5画布元素？

Question

我的页面背景中能否添加一个HTML5画布元素？

45

是否可以在网页的背景上放置一个全屏画布元素，再放置一些“正常”的标记元素，例如表格？

类似于以下代码片段（如果它不用作备选内容）：

<canvas id="imageView" width="100%" height="100%">
    <table>...</table>
</canvas>

- user306708

4个回答

9

<html>
  <style>
    body {
      margin:0;
      padding:0;
    }
    canvas{
      position:absolute;
      left:0;
      top:0;
      z-index:-1;
    }
    div{
      position:absolute;
      z-index:0;
      left:12px;
      top:10px;
    }
  </style>
  <body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <div>hello is floating div</div>

    <script type="text/javascript">
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 600, 600);

      grd.addColorStop(0, "#FF0000");
      grd.addColorStop(1, "#00FF00");

      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 600, 600);
    </script>
  </body>
</html>

- Rj Lakhani

1

首先，您需要使用JavaScript进行画布绘制。但是，您可以通过使用CSS将画布元素作为背景来实现。尝试这个脚本，它可能满足您的需求 :) - Rj Lakhani

对我来说完美地工作了！ - JRichardsz

8

我为您尝试了以下代码。div元素会像Matthew描述的那样放置在画布元素上方。因此，这对您应该有效：

我已经为您尝试了以下代码。 div元素会像Matthew所描述的那样放置在画布元素的顶部。因此，这对您也应该有效：

<!DOCTYPE HTML>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Canvas demo</title>
  <style type="text/css">
    #canvasSection{ position:fixed;}
  </style>
  <script type="text/javascript">
    function draw()
    {
      //paint the text
      var canvas = document.getElementById('canvasSection');
      var context = canvas.getContext('2d');
    
      context.fillStyle    = '#00f';
      context.font         = 'italic 30px sans-serif';
      context.textBaseline = 'top';
      context.font         = 'bold 30px sans-serif';
      context.strokeText('Your Text!!', 0, 0);

      //paint the square
      var canvasSquare = document.getElementById('canvasSquare');
      var ctxSquare = canvas.getContext('2d');

      ctxSquare.fillStyle='#FF0000';
      ctxSquare.fillRect(0, 100,50,100);
    }
  </script>
  </head>
  <body onLoad="draw()">
    <canvas id="canvasSection">Error, canvas is not supported</canvas>
    <div>TestText</div>
  </body>
</html>

- Rob

2

您可以使用toDataURL()将其纯粹地分离出HTML，以JS形式使用。

var c = document.createElement('canvas'),        
    ctx = c.getContext('2d'),
    size = c.width = c.height = 50;

for( var x = 0; x < size; x++ ){
    for( var y = 0; y < size; y++ ){
        ctx.fillStyle = 'hsl(0, 0%, ' + ( 100 - ( Math.random() * 15 ) ) + '%)';
        ctx.fillRect(x, y, 1, 1);
    }
}

document.body.style.background = 'url(' + c.toDataURL() + ')';

HTML on <b>canvas background</b>

基于此CodePen。

- user985399

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Scharley · Accepted Answer

你可以尝试在画布上设置一个CSS样式，其中有position:fixed（或适当的absolute），然后任何跟随它的内容（与你示例中的容器内容不同）应该位于其上方。

Translated:

您可以尝试在画布上设置 CSS 样式，使其具有 position: fixed（或适用的 absolute），然后任何跟随它的内容（与您示例中的容器内容不同）应该位于其上方。