如何在畫面上方製作畫布線條畫？

基本上，我正在創建一個匹配遊戲。當我選擇一個項目時（例如圖片中看到的梨），它將轉化爲右側。但是，它將最終位於畫布上繪製的線的頂部。我希望線條位於圖像的頂部，而不是相反。如何在畫面上方製作畫布線條畫？

我試過使用z-index作爲canvas大於img，但它不起作用。任何想法如何解決這個問題？

HTML

<table class="first"> 
    <tr> 
    <td> 
     <ul class="firstleft"> 
     /*some images to be filled here*/ 
     </ul> 
    </td> 
    <td> 
     <canvas id="myCanvas" resize></canvas> 
    </td> 
    <td> 
     <ul class="firstright"> 
     /*some images to be filled here*/ 
     </ul> 
    </td> 
    </tr> 
</table>

CSS

img { 
    z-index: 1; 
} 
canvas { 
    z-index: 20; 
}

var canvas = document.getElementById('myCanvas'); 
ctx = canvas.getContext("2d") 
ctx.lineWidth = 6; 
ctx.strokeStyle = "#333"; 
/* Drawing part using an example*/ 
ctx.beginPath(); 
ctx.moveTo(100, 250); 
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250); 
ctx.stroke();

來源

2016-02-12 CHEWWWWWWWWWW

組** **像'Z-index'到'-1' – Gomzy

哼。仍然不起作用 – CHEWWWWWWWWWW

只是檢查了這一點...可能會幫助你..http：//stackoverflow.com/questions/10623678/html5-canvas-how-to-draw-a-line-over-an - 圖像背景和這一個也是http://stackoverflow.com/questions/26902084/html5-canvas-how-to-draw-rectangle-over-image-in-canvas?lq=1 –

在這種情況下

它的工作原理

var canvas = document.getElementById('demo'), /// canvas element 
    ctx = canvas.getContext('2d'),   /// context 
    line = new Line(ctx),      /// our custom line object 
    img = new Image;       /// the image for bg 

ctx.strokeStyle = '#fff';      /// white line for demo 

/// start image loading, when done draw and setup 
img.onload = start; 
img.src = 'http://i.imgur.com/O712qpO.jpg'; 

function start() { 
    /// initial draw of image 
    ctx.drawImage(img, 0, 0, demo.width, demo.height); 

    /// listen to mouse move (or use jQuery on('mousemove') instead) 
    canvas.onmousemove = updateLine; 
}

來源

2016-02-12 06:19:19

如何在畫面上方製作畫布線條畫？

回答

相關問題