如何在画布后面放置图像

Question

我正处于游戏的最后阶段，当我放置背景图像时，它与画布重叠，我该如何解决？ - Google翻译器

game

game with background

Answer 1

使图像成为包含画布的元素的css背景图像，或者使图像的绝对z-index值小于画布

Answer 2

您可以利用画布的drawImage属性

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var background = new Image();
background.src = "https://cdn0.iconfinder.com/data/icons/is_google_plus_one_icons/256/google_plus_one_-plus-1_canvas.png";
background.onload = function(){
    ctx.drawImage(background,0,0, 200, 100);   
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
}

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

利用图像的onload属性绘制画布内容。