Question

我正在使用Bootstrap进行一个单页的网站项目。本网站分为4个部分，每个部分位于一个＆＃39;部分内。具有自己的背景颜色/图像和内容。对于其中一个部分（第一部分），它占据了整个屏幕并且具有一个“导航栏”。在顶部和一些标题内，我想设置一个脚本作为背景，而不是像其他部分中的简单图像或纯色。

为此，我想知道如何将JavaScript代码设置为背景，而不会影响同一部分中的任何其他项目，并且能够在此背景元素上查看文本。

这是我想设置为背景的具体脚本（从codePen.io获取）：http://jsfiddle.net/oleg_korol/a1bxr5ua/1/

以下是代码：

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    opts = {

        len: 20,
        count: 50,
        baseTime: 10,
        addedTime: 10,
        dieChance: .05,
        spawnChance: 1,
        sparkChance: .1,
        sparkDist: 10,
        sparkSize: 2,

        color: 'hsl(hue,100%,light%)',
        baseLight: 50,
        addedLight: 10, // [50-10,50+10]
        shadowToTimePropMult: 6,
        baseLightInputMultiplier: .01,
        addedLightInputMultiplier: .02,

        cx: w / 2,
        cy: h / 2,
        repaintAlpha: .04,
        hueChange: .1
    },

    tick = 0,
    lines = [],
    dieX = w / 2 / opts.len,
    dieY = h / 2 / opts.len,

    baseRad = Math.PI * 2 / 6;

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);

function loop() {

    window.requestAnimationFrame(loop);

    ++tick;

    ctx.globalCompositeOperation = 'source-over';
    ctx.shadowBlur = 0;
    ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
    ctx.fillRect(0, 0, w, h);
    ctx.globalCompositeOperation = 'lighter';

    if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);

    lines.map(function (line) {
        line.step();
    });
}

function Line() {

    this.reset();
}
Line.prototype.reset = function () {

    this.x = 0;
    this.y = 0;
    this.addedX = 0;
    this.addedY = 0;

    this.rad = 0;

    this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();

    this.color = opts.color.replace('hue', tick * opts.hueChange);
    this.cumulativeTime = 0;

    this.beginPhase();
}
Line.prototype.beginPhase = function () {

    this.x += this.addedX;
    this.y += this.addedY;

    this.time = 0;
    this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;

    this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
    this.addedX = Math.cos(this.rad);
    this.addedY = Math.sin(this.rad);

    if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset();
}
Line.prototype.step = function () {

    ++this.time;
    ++this.cumulativeTime;

    if (this.time >= this.targetTime) this.beginPhase();

    var prop = this.time / this.targetTime,
        wave = Math.sin(prop * Math.PI / 2),
        x = this.addedX * wave,
        y = this.addedY * wave;

    ctx.shadowBlur = prop * opts.shadowToTimePropMult;
    ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
    ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2);

    if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
}
loop();

window.addEventListener('resize', function () {

    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

    opts.cx = w / 2;
    opts.cy = h / 2;

    dieX = w / 2 / opts.len;
    dieY = h / 2 / opts.len;
});
//@ sourceURL=pen.js

非常感谢！

原始代码来自：http://codepen.io/towc/pen/mJzOWJ 作者：Matei Copot

Answer 1

您可以使用iframe执行此操作并将其作为absolute元素放置，其全身宽度和高度如下所示：

HTML：

<body>
    <div id="iframe"><iframe name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0" src="//fiddle.jshell.net/oleg_korol/a1bxr5ua/1/show/"></iframe></div>
            <!--Your page content-->
</body>

CSS：

html, body {
    margin:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
iframe {
    width:100%;
    height:100%;
}

#iframe {
    position: absolute;
    float: left;
    clear: both;
    width: 100%;
    height: 100%;
    z-index: 0;
}

以下是具有上述代码的jsfiddle：https://jsfiddle.net/AndrewL32/kkLLxkxk/2/

这是一个包含以上代码的StackOverflow代码段：

html, body {
        margin:0px;
        width:100%;
        height:100%;
        overflow:hidden;
}

iframe {
    width:100%;
    height:100%;
}

#iframe {
    position: absolute;
    float: left;
    clear: both;
    width: 100%;
    height: 100%;
    z-index: 0;
}

<div id="iframe"><iframe name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0" src="//fiddle.jshell.net/oleg_korol/a1bxr5ua/1/show/"></iframe></div>

没有IFRAME：

如果您想使用画布作为整个页面的背景图片，那么您使用的当前代码应该可以正常使用width和height定义：

canvas {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

但是如果你想将它作为某个div的背景图像，那么你可以像这样在父div中添加position:relative;属性：

HTML：

<div id="canvas-box">
    <canvas id=c></canvas>
</div>

CSS：

#canvas-box {
    position:relative;
    width:500px;
    height:500px;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}

这是一个jsfiddle，用于添加画布作为特定div的背景：http://jsfiddle.net/AndrewL32/a1bxr5ua/5/

如何将脚本设置为具体<section>的背景？

1 个答案: