Question

我试图找出如何将我创建的画布转换为HTML正文的背景图像。谢谢！

<head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      canvas.style.background = '#D1E0FF';
      var context = canvas.getContext("2d");
      for (i=0; i<20; i++) {
        context.fillStyle = '#FF8533';
        context.fillRect (
            Math.round(Math.random()*300*100)/100,
            Math.round(Math.random()*300*100)/100,
            30,
            30
          );
      }
    var backgroundURL = canvas.toDataURL();
    ???
    }
  </script>
</head>

<body onload="draw();">
  <canvas id="canvas" width="300px" height="300px"></canvas>
</body>

Answer 1

使用CSS，您可以使用

-webkit-canvas当然只适用于webkit浏览器。要在Firefox上实现类似的效果，您可以使用

-moz-element

<强> Live demo

CSS

body{
    background: -webkit-canvas(background);
}

的JavaScript

var ctx = document.getCSSCanvasContext('2d', 'background', 300, 300);

// make some random rects
var i = 50;
while(i--){
    ctx.fillRect(Math.random()*300, Math.random()*300, Math.random()*50, Math.random()*50);
}

More Information on webkit method

More information on Firefox method

Answer 2

如果您使用的是jQuery

$('body').css("background-image", backgroundURL);

Answer 3

toDataURL方法返回一个等效的URL。您需要将它放在一个URL的位置。

object.style.backgroundImage="url("+canvas.toDataURL()+")";

我会用身份证标记身体元素。

document.getElementById("mypage").style.backgroundImage="url("+canvas.toDataURL()+")";

当然还有其他方法来获取身体对象。

<强>更新

per dontvotemedown，我相信你需要toDataURL（）

的参数

Answer 4

喜欢this回答，你可以试试这个：

$('body').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });

将画布设置为背景 - Javascript

4 个答案:

CSS

的JavaScript