javascript - 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();
})

如果我点击按钮 bt，并将鼠标悬停在 Canvas div 上，我的背景就会消失我怎样才能在背景上绘制新图像

Answer 1

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

要解决此问题，只需像绘制 'facesSmall.png' 一样绘制 "tank_usa.jpg":使用 addLayer 和 类型:'图像'设置。

$('#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();
});