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

【问题标题】：html5 canvas background image disappear on mousemovehtml5画布背景图像在mousemove上消失
【发布时间】：2016-08-05 04:48:26
【问题描述】：

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

图像已成功加载到画布上
但是当我的鼠标悬停在画布上时，图像消失了。
当我拖动鼠标时，空白画布上显示了一些草图。淹死了

正确

所以，我认为 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>

【问题讨论】：

我检查了你的代码...它在 mousedown 而不是 mouseover 时消失！
是的.. 无论如何，当我拖动鼠标草图时显示为空画布。草图没有问题，它看起来是正确的

标签： javascript html5-canvas

【解决方案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>

更新

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

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

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

【讨论】：

我想保存图纸如果没有没有问题。
好的。我找到了。这是sketch.js 中的一个错误。从 sketch.js 文件中删除这一行：this.el.width = this.canvas.width();
哦..它的工作非常感谢你亲爱的..！你让我很高兴再次非常感谢你。

【解决方案2】：

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

只需删除 sketch.js 中的这一行

我不知道他们为什么不更新这个sketch.js，即使我们发现了错误和解决方案

【讨论】：

【解决方案3】：

删除 width = line 作品，但我发现如果你用 rgba(0, 0, 255, 0.5) 绘制，你最终会用 rgba(0, 0, 255, 1) 绘制。

原因是：鼠标移动时，每次都会调用redraw。所以画布被重置，每个先前的点都将被绘制。当上面的线被移除时，同一个像素将被多次绘制，从而移除透明。（透明加起来为1）

【讨论】：