jCanvas -背景图像消失

Question

我使用这个http://projects.calebevans.me/jcanvas/，我有一个简单的例子

    <input type="button" class="bt" value="draw"/><br>
  <canvas id="picture" width=1350 height=1350></canvas> 

和js

var canvas = document.getElementById("picture");
 var ctx = canvas.getContext('2d');
    var img = new Image(); 
    img.src = "tank_usa.jpg"; 
    img.onload = function(){
         ctx.drawImage(img, 0, 0);
    }
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
  type: 'image',
  draggable: true,
  source: 'facesSmall.png',
  fillStyle: '#fff',
  strokeStyle: '#c33',
  strokeWidth: 2,
  x: 180, y: 150,
  width: 200, height: 125,
  handle: {
    type: 'arc',
    fillStyle: '#fff',
    strokeStyle: '#c33',
    strokeWidth: 2,
    radius: 10
  }
})
.drawLayer();
})

如果im单击bt按钮，并将画布div悬停，我的背景就会消失，如何在背景上绘制新的图像。

Answer 1

您的背景会被擦除，因为您使用的是ctx.drawImage，它不会创建jCanvas层。jCanvas层和非层不能存在于同一画布上，因为当jCanvas重新绘制画布(通过drawLayers()手动绘制或触发事件时自动)时，非层将被擦除。

要解决这个问题，只需绘制"tank_usa.jpg"，就像绘制'facesSmall.png'：使用addLayer和type: 'image'集一样。

$('#picture').addLayer({
    type: 'image',
    source: 'tank_usa.jpg',
    x: 0, y: 0,
    fromCenter: false
});
$(".bt").on("click",function(){
    // Draw a resizable image
    $('#picture').addLayer({
        type: 'image',
        draggable: true,
        source: 'facesSmall.png',
        fillStyle: '#fff',
        strokeStyle: '#c33',
        strokeWidth: 2,
        x: 180, y: 150,
        width: 200, height: 125,
        handle: {
            type: 'arc',
            fillStyle: '#fff',
            strokeStyle: '#c33',
            strokeWidth: 2,
            radius: 10
        }
    })
    .drawLayer();
});