簡體   English   中英

如何在畫布上同時繪制圖像和素描

[英]how to draw both image and sketch on canvas together

我想在畫布上繪制圖像,然后允許用戶通過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"});

    }

我認為,在您要求草繪方法時
sketch.js首先清除畫布,然后允許您在其上繪制一些內容。
正如您在此處的鏈接中看到的那樣,在第三個示例(即“工具示例”)中,圖像不是通過drawImage方法繪制的。
實際上,它是畫布的背景,無論您在其上繪制什么,它都將始終作為背景。

因此,您可以做的是:

可以執行與示例相同的操作,即將您的圖片設置為背景,

或在畫布后面以相同的寬度,高度和相同的位置制作新的畫布,並在其上繪制圖像。 然后在第二個上做草圖。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM