如何在畫布上同時繪製圖像和草圖

我想繪製一幅圖像到畫布上，然後允許用戶通過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"}); 

    }

來源

2012-10-11 sophia

你確定沒有'懸停'事件的一些CSS或其他功能？ – Hank

我認爲，您的呼叫，以素描方法
sketch.js被清空畫布首先允許你在它上面畫點東西。
正如您在鏈接here中看到的那樣，在第三個示例（即工具示例）中，圖像不是通過drawImage方法繪製的。
它實際上是畫布的背景，它總是會以背景的形式存在，無論你在畫背景上如何。

所以你可以做的是：

無論是做同樣的事情，在這個例子中即設置你的背景圖片，

或創建一個新的畫布後面有相同的寬度，高度和同一畫布位置並在其上繪製圖像。並在第二個上做你的素描。

來源

2012-10-12 07:13:41 Vijay

謝謝。但我認爲它不起作用 - 我想先顯示圖像，然後在其上顯示草圖;用兩個畫布，只有一個可以留在上面。 – sophia

爲第二個畫布不設置背景屬性，這將使其透明。或者您可以先在畫布上繪製圖像，然後讓用戶在其上繪製草圖，但最重要的是，您不會清除其間的畫布，這會使圖像消失。 – Vijay

你說得對，sketch.js首先清除了畫布，然後我修復了它。只允許一個畫布，那就沒問題。再次感謝！ – sophia

如何在畫布上同時繪製圖像和草圖

回答

相關問題