Как менять картинку при наведении на Сanvas?

Question

Есть у меня скрипт, который меняет картинку при наведении на нее. А как мне это сделать на Canvas?

function onHover()
{
    $("#menuImg").attr('src', 'https://sun9-51.userapi.com/c205520/v205520651/442fb/m925WBRlXR8.jpg?ava=1');
}

function offHover()
{
    $("#menuImg").attr('src', 'https://pp.userapi.com/c841624/v841624151/5a335/PkaZQTScko0.jpg?ava=1');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu" >  
  <a href="#" id="home">
    <img id="menuImg" src="https://pp.userapi.com/c841624/v841624151/5a335/PkaZQTScko0.jpg?ava=1" alt="logo" onmouseover="onHover();" 
      onmouseout="offHover();" />
  </a>
</div>

Answer 1

Может быть так?

function imgChange(imagePath) {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = imagePath;
}

<body onload="imgChange('https://sun9-51.userapi.com/c205520/v205520651/442fb/m925WBRlXR8.jpg?ava=1')">
  <canvas id="canvas" width="200" height="200" onmouseover="imgChange('https://pp.userapi.com/c841624/v841624151/5a335/PkaZQTScko0.jpg?ava=1')" onmouseout="imgChange('https://sun9-51.userapi.com/c205520/v205520651/442fb/m925WBRlXR8.jpg?ava=1')"></canvas>

БЛОГ НА HUSL

Как менять картинку при наведении на Сanvas?

Ответы (1 шт):