Question

我们希望将一些画布背景添加到页面here。

我们需要的是在网站上，它应该显示如下图像。

我们正在使用下面的代码，但它显示为空白。

<div class="canvas-container" style="width: 300px; height: 500px; position: relative; -webkit-user-select: none;">
<canvas id="case_canvas" width="300" height="500" class="lower-canvas" style="position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>
<canvas class="upper-canvas " width="300" height="500" style="position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;"></canvas>
</div>

Answer 1

2种可能性：

首先定义一个css背景（我很确定它不是你正在寻找的解决方案，但也许这是js的替代方案）

.canvas-container {
   background: url("http://i.stack.imgur.com/xgNw7.png") no-repeat fixed center;
}

小提琴：https://jsfiddle.net/pmeb1uhm/

使用js

在画布上绘制图像

var img = new Image();
img.onload = function() {
  //draw after loading
  canvas = document.getElementById('case_canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

img.src = "http://i.stack.imgur.com/xgNw7.png";
//^^ this will start loading the image

小提琴：https://jsfiddle.net/pmeb1uhm/1/

画布图像未在站点中显示

1 个答案: