Question

我能够将图像获取到绘图画布的后面，但是当我开始在画布上绘图时，图像消失了

var $ = function(id){return document.getElementById(id)};

var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
ctx = canvas.getContext("2d");
var background = new Image();
background.src = "images/pic01.jpg";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

Answer 1

那不是您使用织物绘制图像的方式。

这是使用fabric.Image.fromURL

的正确方法

var canvas = new fabric.Canvas('c', { isDrawingMode: true });

fabric.Image.fromURL('http://i.stack.imgur.com/UFBxY.png', function(myImg) {
  canvas.add(myImg);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>

HTML canvas如何在背面设置图像，以便我可以在其顶部绘制

1 个答案: