html5画布背景图像在鼠标移动时消失

html5 canvas background image disappear on mousemove

本文关键字：鼠标 移动 消失 图像 布背景 背景 html5      更新时间：2023-09-26

我想在画布上画一张图像，然后允许用户在上面画一些草图。我使用的是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>

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

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()

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

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

只需在sketch.js 中删除此行

我不知道为什么他们不更新这个CCD_ 4，即使我们发现了错误&解决方案

删除width=line是可行的，但我发现如果你用rgba(0，0255，0.5(绘制，你最终会用rgba。

原因是：当鼠标移动时，每次都会调用重绘。因此画布被重置，之前的每个点都会被绘制出来。当去除上面的线时，同一个像素会被多次绘制，从而去除透明。(透明加起来，等于1(

相关文章：