javascript - html5 Canvas 背景图像在鼠标移动时消失

Question

我想在 Canvas 上绘制图像，然后允许用户在上面画一些草图。我正在使用 sketch.js jquery 库。当前状态是:

1. 图像已成功加载到 Canvas 上
2. 但是当我的鼠标悬停在 Canvas 上时，图像就消失了。
3. 当我拖动鼠标时，一些素描出现在空白的 Canvas 上。淹死了

正确

所以，我认为 sketch.js 确实清除了 Canvas 。但我不知道如何修复它。有什么帮助吗？？

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

如果您不需要保存图像，您可以将其作为 Canvas 的背景。你不需要每次都画它。

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>

更新

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

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

因为 Canvas 元素就是这样工作的。每次调整大小后都会清除 Canvas ，sketch.js 需要在调整大小后重新绘制，但 lib 不知道您的图像。