如何在画布上同时绘制图像和草图

时间:2012-10-11 21:35:46

标签: javascript jquery image html5-canvas sketching

我想将图像绘制到画布上,然后允许用户通过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)

所以,我已经使两个功能都正确,但我对两者之间的部分感到困惑。我希望在画布上绘制草图并在其上绘制图像。这是我的代码:

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

    }

1 个答案:

答案 0 :(得分:1)

我认为,在你对素描方法的要求上 sketch.js首先清除画布,然后允许你在上面绘制一些东西 正如您在链接here中看到的那样,在第3个示例(即工具示例)中,图像不是通过drawImage方法绘制的。
它实际上是画布的背景,它总是作为背景出现,无论你在它上面画什么
所以你能做的是:

或者做与示例中相同的事情,即将图像设置为背景,    

或在画布后面制作一块宽度,高度相同且位置相同的新帆布,并在上面绘制图像。并在第二个上做你的草图。