html5画布背景图像在mousemove上消失

Question

我想将图像绘制到画布上,然后允许用户在其上绘制一些草图.我使用sketch.js jquery库.当前状态为:

1. 图像已成功加载到画布上
2. 但当我的鼠标悬停在画布上时,图像就消失了.
3. 当我拖动鼠标时,一些草图显示在空白的画布上.淹死了

正确地

所以,我认为sketch.js确实清除了画布.但我不知道如何修复它.任何帮助？

canvas.html

<canvas id="tools_sketch" width="300" height="300" style="background: no-repeat center center;border:black 1px solid"></canvas>

这是我的剧本

<script type="text/javascript">
    var sigCanvas = document.getElementById('tools_sketch');
    var context = sigCanvas.getContext('2d'); 
    var imageObj = new Image();
    imageObj.src = 'human-face.jpg';
    imageObj.onload = function() {
       context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.width);
    };

    $(function() {
       $('#tools_sketch').sketch({defaultColor: "#FF0000"});
    });

</script>

Answer 1

如果您不需要保存图像,可以将其作为画布的背景.您不需要每次都绘制它.

style="background: url(your-image-here) no-repeat center center;"

<canvas id="tools_sketch" width="300" height="300" style="background: url(your-image-here) no-repeat center center;"></canvas>

UPDATE

这是sketch.js中的一个错误.您需要从sketch.js源中删除此行:

this.el.width = this.canvas.width()

因为canvas元素以这种方式工作.每次调整大小后都会清除画布和sketch.js需要在调整大小后重绘,但是lib不知道你的图像.