javascript - 如何在 Canvas 上同时绘制图像和草图

Question

我想在 Canvas 上绘制图像，然后允许用户通过 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)

所以，我已经正确地完成了这两个功能，但我对中间的部分感到困惑。我希望在 Canvas 上画草图，上面有图像。这是我的代码:

index.html:

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

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"});

    }

Answer 1

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

所以你可以做的是:

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

或者在你的 Canvas 后面制作一个新的 Canvas ，宽度、高度和位置相同，然后在上面画你的图像。然后在第二个上画草图。