如何使画布元素充当背景？

Question

I want to use the canvas element as the background for my page. 我想使用canvas元素作为页面的背景。

How can I make "We craft brand experiences for companies and nonprofits making a difference." 我该如何做：“我们为有影响力的公司和非营利组织打造品牌体验。” show up on top of the background? 出现在背景上方？

  <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Confetti Party</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> </head> <body> <canvas id="canvas"></canvas> <script src="js/index.js"></script> <h1>we craft brand experiences for companies and nonprofits making a difference. </h1> </body> </html>

As you can see, my h1 tag is not on top of background. 如您所见，我的h1标签不在背景顶部。

Answer 1

If I understand your question correctly, then you effectively want to make the canvas your page's background. 如果我正确理解了您的问题，那么您实际上想将画布作为页面的背景。 This is rather trivial can be done by taking advantage of the CSS z-index property: 通过利用CSS z-index属性可以做到这一点很简单：

 /////////////////////////////////////////////// // configurables /////////////////////////////////////////////// // background color // var bg = [159, 240, 167] var bg = [255, 255, 225] // maximum number of particles present at any time var num_particles = 150 // chace of split var chance_birth = 0.37 // chance of termination/death var chance_death = 0.38 var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688'] /////////////////////////////////////////////// // the other stuff /////////////////////////////////////////////// //var canvas = document.createElement("canvas") //document.getElementsByTagName("body")[0].appendChild(canvas) var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") var particles = [] var step = 0 var step_max = 360 setup() window.addEventListener("resize", setup) function setup() { canvas.width = window.innerWidth canvas.height = window.innerHeight fill(1) } function fill(amt) { ctx.beginPath(); ctx.rect(0, 0, canvas.width, canvas.height) ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})` ctx.fill() } setInterval(animate, 1000/60) // window.requestAnimationFrame(animate); function animate() { fill(0.01) step = (step + 1) % step_max draw() // window.requestAnimationFrame(function(){animate()}) } function getRandCol () { return cols[Math.floor(Math.random() * cols.length)] } function draw() { var pad = 0.02 var p if (particles.length < num_particles && step % 2 === 0) { var x = (Math.random() * (1 - pad * 2) + pad) * canvas.width var y = canvas.height + Math.random()*10 //(Math.random() * (1 - pad * 2) + pad) * canvas.height p = new Particle(x, y, ctx) particles.push(p) } var i for (i = 0; i < particles.length; i++) { particles[i].update() particles[i].draw() // branch-birth if (step % 4 === 0 && Math.random() < chance_birth && particles.length < num_particles) { var x = particles[i].x var y = particles[i].y p = new Particle(x, y, ctx) p.color = particles[i].color particles.push(p) } } // death for (i = particles.length -1 ; i >= 0; i--) { p = particles[i] if ((step % 4 === 0 && Math.random() < chance_death) || py < -20 || px < -20 || px > canvas.width + 20) { particles.splice(i, 1) } } // draw links var dist_max = 60 for (i = particles.length -1 ; i >= 0; i--) { p = particles[i] } } function Particle (x, y, ctx) { this.x = x this.y = y this.px = x this.py = y this.dx_min = -20 this.dx_max = 20 this.dy_min = -1 this.dy_max = -25 this.s = 0.8 this.ctx = ctx this.color = getRandCol() //"#ee9977" this.update = function () { this.px = this.px * this.s + this.x * (1 - this.s) this.py = this.py * this.s + this.y * (1 - this.s) var dxy = this.dxy() this.x = this.s * this.x + (Math.random() * dxy.dx + this.x) * (1 - this.s) this.y = this.s * this.y + (Math.random() * dxy.dy + this.y) * (1 - this.s) } this.draw = function () { // var v = Math.min(this.vsq(), 500) ctx.lineWidth = 2 //Math.sqrt(v)/3 ctx.beginPath() ctx.moveTo(this.px, this.py) ctx.strokeStyle = this.color ctx.lineTo(this.x, this.y) ctx.lineCap = "round" ctx.stroke() } this.dxy = function () { var dx = (this.dx_max - this.dx_min) * Math.random() + this.dx_min var dy = (this.dy_max - this.dy_min) * Math.random() + this.dy_min return {dx, dy} } this.vsq = function () { var x = this.px - this.x var y = this.py - this.y return x * x + y * y } }

 canvas{ /* Move the canvas to a low z-index (background) */ z-index: -1; } .wrapup{ /* This class creates a div that is positioned on top of everything outside of it */ width:100%; height:100%; z-index:100; display:block; overflow:hidden; margin:0; border:0; padding:0; position:absolute; top:0; bottom:0; right:0; left:0; } body { /* Just some stuff to clean up the look by filling page and removing scrollbars */ width:100%; height: 100%; overflow: hidden; }

  <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Confetti Party</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> </head> <body> <canvas id="canvas"></canvas> <script src="js/index.js"></script> <div class="wrapup"> <h1>we craft brand experiences for companies and nonprofits making a difference. </h1> </div> </body> </html>

As for how you decide to position the h1 on the page, that is up to you, but anything you place inside of the wrapup div will appear atop the canvas. 至于您如何确定h1在页面上的位置，这取决于您，但是您在wrapup div内放置的任何内容都将出现在画布顶部。

Answer 2

Change <h1> to 将<h1>更改为

<h1 style="position:fixed; top:500px; left:300px;">

You can adjust the 500px and 300px values to move it to a different position on the screen. 您可以调整500px和300px的值以将其移动到屏幕上的其他位置。 You can also use a combination of % and margin to automatically center the element, for example: 您还可以结合使用％和margin来自动使元素居中，例如：

top:50%; margin-top:-6em;

If you want the text to scroll down with the page, use position:absolute instead. 如果希望文本随页面向下滚动，请改用position：absolute。

如何使画布元素充当背景？

问题描述

2 个解决方案

解决方案1
0 2017-11-11 21:23:33

解决方案2
-2 2017-11-11 20:13:09

如何使画布元素充当背景？

问题描述

2 个解决方案

解决方案1 0 2017-11-11 21:23:33

解决方案2 -2 2017-11-11 20:13:09

解决方案1
0 2017-11-11 21:23:33

解决方案2
-2 2017-11-11 20:13:09