1

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

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

正确地

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

画布.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>
4

3 回答 3

5

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

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 不知道您的图像。

于 2013-06-01T06:48:47.787 回答
1 
this.el.width = this.canvas.width()

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

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

于 2013-11-20T09:34:28.680 回答
1

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

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

于 2016-08-04T20:48:26.017 回答