2

我想将图像绘制到画布上，然后允许用户通过 sketch.js 在其上绘制一些草图。现在的情况是：

  1.the image has been drawn on the canvas successfully
  2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
  3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)

所以，我把这两个功能都做好了，但我对两者之间的部分感到困惑。我希望在画布上画出带有图像的草图。这是我的代码：

索引.html：

<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>

画布.js：

var mysketch = jQuery("#mysketch");

// draw the captured image to canvas 
    var displayImage = function() {
    var context = mysketch.get(0).getContext("2d");     
        var image = new Image();

        image.onload = function() {
            context.drawImage(image, 0, 0);
        }

    // prepend the required image info again
        image.src = dataURL;

        // call sketch.js to draw sketch on the canvas
    mysketch.sketch({defaultColor: "#ff0"});

    }
4

1 回答 1

1

我认为，在您调用草图方法时，
sketch.js 首先清除画布，然后允许您在其上绘制一些东西。
正如您在此处的链接中看到的，在第三个示例（即工具示例）中，图像不是通过 drawImage 方法绘制的。
它实际上是画布的背景，无论你在上面画什么，它都会一直作为背景存在。

所以你可以做的是：

要么做与示例中相同的事情，即将你的图像设置为背景，

要么在你的画布后面创建一个具有相同宽度、高度和相同位置的新画布，并在其上绘制你的图像。并在第二个上做你的草图。

于 2012-10-12T07:13:41.320 回答