Настройка холста в качестве фона

Question

На данный момент у меня есть изображение на холсте, которое меняет цвет с помощью JavaScript. Я пытаюсь установить его как свой фон и провалиться.

Я следил за этим руководством Google Developers, но кажется слишком простым - 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-индекс, чтобы сделать ваш холст в качестве фона. Пример (с использованием другой анимации):

Fiddle: 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>