将画布设置为背景

Question

目前我有一个画布图像，可以用 JavaScript 改变颜色。我正在尝试将其设置为我的背景，但失败了。

我已按照此 Google 开发人员指南进行操作，但它似乎太简单了 - https://developers.google.com/web/updates/2012/12/Canvas-driven-background-images?hl=en。

这是我的脚本：

<script>
    var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
    var canvas = document.getElementById("canvas");
    var processing = new Processing(canvas, function(processing) {
        processing.size(innerWidth, innerHeight);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        with (processing) {

    var Walker = function() {
        this.x = width/2;
        this.y = height/2;
        this.walkSpeed = 10;
        this.r = random(100,255);
        this.g = random(100,255);
        this.b = random(100,255);
        this.colorStep = 5;
    };

Walker.prototype.display = function() {
    noStroke();
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, 10, 10);
};

Walker.prototype.changeColor = function() {
    this.r+=(random(0,2)-1)*this.colorStep;
    this.g+=(random(0,2)-1)*this.colorStep;
    this.b+=(random(0,2)-1)*this.colorStep;
};

// Randomly move up, down, left, right, or stay in one place
Walker.prototype.walk = function() {
    var choice = floor(random(4));
    if(this.x<=0||this.x>=width) {
        this.x=width/2;
    }
    if(this.y<=0||this.y>=height) {
        this.y=height/2;
    }
    if (choice === 0) {
        this.x+=this.walkSpeed;
    } else if (choice === 1) {
        this.x-=this.walkSpeed;
    } else if (choice === 2) {
        this.y+=this.walkSpeed;
    } else {
        this.y-=this.walkSpeed;
    } 
};

var w = new Walker();

var draw = function() {
    w.walk();
    w.changeColor();
    w.display();
};

        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });

</script>

该网站位于http://worldofwinfield.co.uk/

请放轻松-我是初学者！

谢谢 詹姆斯

Answer 1

您可以使用绝对定位和 z-index 将画布设置为背景。示例（使用不同的动画）：

小提琴：http://jsfiddle.net/s8f6LqLz/

var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
  window.requestAnimationFrame(draw);
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,300,300); // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(150,150);

  // Earth
  var time = new Date();
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth,-12,-12);

  // Moon
  ctx.save();
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(0,28.5);
  ctx.drawImage(moon,-3.5,-3.5);
  ctx.restore();

  ctx.restore();
  
  ctx.beginPath();
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
  ctx.stroke();
 
  ctx.drawImage(sun,0,0,300,300);

  window.requestAnimationFrame(draw);
}

init();

.canvas-container {
    width: 300px;
    height: 300px;
    position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: white;
    font-size: 40px;
    text-shadow: 3px 3px 3px #000;
    line-height: 70px;
    font-family: sans-serif;
    text-align: center;
}

<div class="canvas-container">
    <canvas id="canvas" height="300" width="300"></canvas>
    <div class="canvas-overlay">Hi, I'm content above the canvas :)</div>
</div>