Как сделать рисунки на холсте над изображением?

По сути, я создаю игру на совпадение. Когда я выбираю предмет (например, грушу, как показано на картинке), он перемещается вправо. Однако в конечном итоге он окажется поверх линии, нарисованной на холсте. Я хочу, чтобы линия была поверх изображения, а не наоборот.

Я пытался использовать z-index для холста, чтобы он был больше, чем 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;
}

JS

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

html css z-index html5-canvas
person CHEWWWWWWWWWW    schedule 12.02.2016    source источник
comment
установите для этого изображения z-index значение -1   -  person Gomzy    schedule 12.02.2016
comment
Хм. все еще не работает   -  person CHEWWWWWWWWWW    schedule 12.02.2016
comment
Просто проверьте это... может быть, это поможет вам..stackoverflow.com/questions/10623678/ и этот также stackoverflow.com/questions/26902084/   -  person Akshay Kumar    schedule 12.02.2016
comment
z-индекс изображения должен быть равен -1, а z-индекс строки должен быть равен 1.   -  person abhay vyas    schedule 12.02.2016
comment
@AkshayKumar Ну, я думаю, что в этом случае все по-другому, потому что я не рисую поверх изображения. Я рисую линии на холсте и перевожу изображение, которое случайно попадается на линию. Поправьте меня если я ошибаюсь   -  person CHEWWWWWWWWWW    schedule 12.02.2016
comment
@abhayvyas уже сделал это   -  person CHEWWWWWWWWWW    schedule 12.02.2016
comment
Ты делаешь все так неправильно, что я даже не знаю, с чего начать.   -  person QBM5    schedule 12.02.2016
comment
@CHEWWWWWWWWWW. Предложение: рассмотрите возможность рефакторинга вашего кода, чтобы все игровые элементы отображались на холсте, где гораздо проще координировать игровые элементы, события мыши пользователя и линии соединения игры.   -  person markE    schedule 13.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

в таком случае это работает

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;
}
person abhay vyas    schedule 12.02.2016