如何在画面上方制作画布线条画？

问题描述：

基本上，我正在创建一个匹配游戏。当我选择一个项目时（例如图片中看到的梨），它将转化为右侧。但是，它将最终位于画布上绘制的线的顶部。我希望线条位于图像的顶部，而不是相反。如何在画面上方制作画布线条画？

我试过使用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();

组** **像'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; 
}

如何在画面上方制作画布线条画？

相关推荐