HTML5畫布 - 如何在圖像背景上繪製線條？

我想在圖像背景上畫一條線 - 在HTML5 Canvas中。但是總是會在圖像後面繪製線條。事實上，這條線首先被繪製，然後繪製圖片 - 無論我如何稱呼這些功能。HTML5畫布 - 如何在圖像背景上繪製線條？

如何將線條放到圖像的頂部？

var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
drawbackground(canvas, context); 
drawlines(canvas, context); 


function drawbackground(canvas, context){ 

    var imagePaper = new Image(); 


     imagePaper.onload = function(){ 


      context.drawImage(imagePaper,100, 20, 500,500); 
     }; 

     imagePaper.src = "images/main_timerand3papers.png"; 
} 



function drawlines(canvas, context){ 


      context.beginPath(); 
      context.moveTo(188, 130); 
      context.bezierCurveTo(140, 10, 388, 10, 388, 170); 
      context.lineWidth = 10; 
      // line color 
      context.strokeStyle = "black"; 
      context.stroke(); 
}

來源

2012-05-16 geeky_monster

完全未經測試的代碼，但你有沒有試過類似的東西？

function drawbackground(canvas, context, onload){ 

    var imagePaper = new Image(); 


     imagePaper.onload = function(){ 


      context.drawImage(imagePaper,100, 20, 500,500); 
      onload(canvas, context); 
     }; 

     imagePaper.src = "images/main_timerand3papers.png"; 
}

，然後調用這樣的方法......

drawbackground(canvas, context, drawlines);

來源

2012-05-16 17:38:36 Chango

如果最後一行drawbackground（畫布，背景，drawlines（帆布，上下文））; ？ –

不，因爲在那種情況下，您將調用方法'drawlines'，然後使用其返回值作爲參數。 – Chango

謝謝！有效。 –

圖像的onload更改爲這樣的事情：

imagePaper.onload = function() { 
    context.drawImage(imagePaper, 100, 20, 500, 500); 
    drawLines(canvas, context); 
};

然後確保你刪除早期調用drawLines 。

這個解決方案很重要的一點是，onload函數將在將來某個時候執行，而drawLines函數會立即執行。您必須時刻注意如何構建回調，特別是在嵌套回調時。

來源

2012-05-16 17:46:29 Sam

謝謝山姆!!!! –

爲了提高效率，假設您要對這條線或多條線進行多次重繪，可以將畫布的CSS background-image設置爲您的圖像。

<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas>

來源

2012-05-16 18:47:32

謝謝西蒙。但我需要對背景進行一些動態更改。因此我沒有使用CSS屬性。 –

或者你可以試試這個：

drawbackground(canvas, context); 
context.globalCompositeOperation = 'destination-atop'; 
drawlines(canvas, context);

來源

2013-02-26 08:54:32 aIKid

HTML5畫布 - 如何在圖像背景上繪製線條？

回答

相關問題