如何使画布元素充当背景？
[英]How can I make canvas element act as a background?
问题描述
我想使用canvas元素作为页面的背景。
我该如何做：“我们为有影响力的公司和非营利组织打造品牌体验。” 出现在背景上方？
<!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>
如您所见，我的h1标签不在背景顶部。
2 个解决方案
解决方案1
0 2017-11-11 21:23:33
如果我正确理解了您的问题，那么您实际上想将画布作为页面的背景。 通过利用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>
至于您如何确定h1在页面上的位置，这取决于您，但是您在wrapup div内放置的任何内容都将出现在画布顶部。
解决方案2
-2 2017-11-11 20:13:09
将<h1>更改为
<h1 style="position:fixed; top:500px; left:300px;">
您可以调整500px和300px的值以将其移动到屏幕上的其他位置。 您还可以结合使用％和margin来自动使元素居中，例如：
top:50%; margin-top:-6em;
如果希望文本随页面向下滚动，请改用position：absolute。
当画布元素上方还有另一个元素时，如何使画布元素中的处理脚本对光标作出反应？
[英]How can i make a processing-script in a canvas-element react to the cursor, when there is another element above the canvas-element?
为什么 backgroundimage 在 chrome 中不是 cssImageValue？ 我如何使用 canvas 处理背景图像但不制作新图像？
[英]why backgroundimage is not cssImageValue in chrome? how can i use canvas deal with background-image but not make a new image?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.