Question

我想将图像绘制到画布上，然后允许用户在其上绘制一些草图。我使用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>

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>

<强>更新

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

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

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

Answer 2

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

只需在sketch.js

中删除此行即可

我不知道他们为什么不更新这个sketch.js即使我们发现错误＆amp;溶液

Answer 3

删除width = line有效，但我发现如果用rgba（0,0,255,0.5）绘图，你最终会用rgba（0,0,255,1）绘图。

原因是：鼠标移动时，每次调用重绘。因此画布重置，将绘制每个前一个点。当删除上面的行时，将多次绘制相同的像素，从而删除透明。（透明加起来，1）

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

3 个答案: