html5画布背景图像在mousemove上消失 [英] html5 canvas background image disappear on mousemove

问题描述

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

I want to draw an image to canvas and then allow user to draw some sketch on it.i'm using sketch.js jquery library.the current status is:

1. 图片已成功加载到画布上


2. 但当我的鼠标悬停在画布上时，图像就消失了。


3. 当我拖动鼠标时，一些草图显示在空画布上。淹死

正确

因此，我认为sketch.js确实清除了画布。但我不知道如何修复它。任何帮助??

so, i think the sketch.js did clear the canvas.but i don't know how to fix it.Any help??

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>

推荐答案

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

If you don't need to save the image you can put it as a background to the canvas. You don't need to draw it every time.

style =background：url（你的图像在这里）无重复中心;

<canvas id="tools_sketch" width="300" height="300" style="background: url(your-image-here) no-repeat center center;"></canvas>

更新

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

It's a bug in sketch.js. You need to remove this line from sketch.js source:

this.el.width = this.canvas.width（）

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

Because the canvas element works that way. Every resize is followed by clearing the canvas and sketch.js needs to redraw after the resize but the lib don't know about your image.

这篇关于html5画布背景图像在mousemove上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！