HTML5 Canvas - Làm thế nào để vẽ một đường trên nền hình ảnh?

Question

Tôi đang cố gắng vẽ một đường thẳng trên nền hình ảnh - trong Canvas HTML5. Tuy nhiên, luôn luôn dòng được vẽ phía sau hình ảnh. Trên thực tế dòng được rút ra đầu tiên và sau đó các hình ảnh được rút ra - không phân biệt như thế nào tôi gọi các chức năng.

Làm cách nào để đưa dòng lên đầu hình ảnh?

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

Answer 1

Mã chưa được kiểm tra hoàn toàn, nhưng bạn đã thử một cái gì đó như thế này chưa?

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

và sau đó gọi phương thức như thế này ...

drawbackground(canvas, context, drawlines); 

Answer 2

Thay đổi onload hình ảnh của bạn đến một cái gì đó như thế này:

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

Sau đó, chắc chắn rằng bạn loại bỏ các cuộc gọi trước đó để drawLines .

Điều quan trọng làm mất đi giải pháp này là chức năng onload sẽ được thực hiện trong tương lai, trong khi hàm drawLines được thực thi ngay lập tức. Bạn phải luôn luôn cẩn thận về cách bạn cấu trúc callbacks của bạn, đặc biệt là khi lồng chúng.

Answer 3

Để hiệu quả hơn, giả sử bạn sắp thực hiện nhiều lần vẽ lại dòng hoặc dòng này, sẽ đặt CSS background-image của canvas làm hình ảnh của bạn.

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

Answer 4

Hoặc bạn có thể thử điều này:

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