Javascript jCanvas-背景图像消失

我用这个 我有一个简单的例子

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

如果im单击按钮bt，并将鼠标悬停在canvas div上，我的背景将消失

---

如何在背景上绘制新图像

您的背景会被删除，因为您使用的是

ctx.drawImage

，它不会创建jCanvas层。jCanvas层和非层不能存在于同一画布上，因为当jCanvas重新绘制画布时（通过

drawLayers（）

手动或在触发事件时自动），非层将被擦除

要解决此问题，只需像您绘制的

'facesSmall.png'

一样绘制

“tank_usa.jpg”

：使用

addLayer

并设置

类型：“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();
});

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