HTML5 манипулирование элементами на холсте

Question

Я хочу знать, как загрузить изображение в холст HTML5. В частности, я хочу сценарий, который меняет одно изображение на другое на холсте при наведении курсора мыши на исходное изображение. Я новичок в HTML5 и имею этот код:

<canvas id="myCanvas" width="500" height="500" />
<script type="text/javascript">
    function drawbackground() {
        char.fillStyle="blue";
        cxt.fillRect(0,0,500,500);
    }

        var charx=0;
        var chary=0;
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var char=c.getContext("2d");
        drawbackground();
        char.fillStyle="black";
        var imgObj = new Image();
        imgObj.src='map1.png';
        imgObj.onload = function () {           
        // Draw the image on the canvas
        char.drawImage(imgObj, 10, 10);
        }       

</script>

Это в правильном направлении?

Answer 1

Вы можете сделать это без HTML5 Canvas. Чтобы поменять местами изображение мыши, проще всего использовать JavaScript Framework под названием jQuery, получите его бесплатно здесь: http://jquery.com/.

С jQuery все, что вам нужно сделать, это что-то вроде следующего:

Сначала создайте изображение тега.

<img src="image1.png" id="myimage" />

Далее добавьте JavaScript для обработки события мыши. Вы можете узнать больше о событиях jQuery здесь: http://api.jquery.com/category/events/

$("#myimage").mouseover(function() {
  $(this).src = this.src.replace("image2.png");
});

Приведенный выше пример изменит изображение при наведении мыши. Чтобы сделать эффекты затухания, вам нужно сделать немного больше: вы можете узнать больше об эффектах jQuery здесь: http://api.jquery.com/category/effects/

Я бы создал два изображения для эффекта и поместил бы каждое поверх другого со свойством css, установленным для скрытия изображения 2.

<div id="imageHolder">
<img src="image1.png" id="myimage1" />
<img src="image2.png" id="myimage2" style="display:none" />
</div>

Далее идет JavaScript:

$("#imageHolder").mouseover(function() {
  $("#image1").fadeOut();
  $("#image2").show();
});

   $("#imageHolder").mouseout(function() {
      $("#image1").fadeIn();
      $("#image2").hide();
    });

Есть много способов сделать это, и приведенный выше код не тестируется, но должен предоставить вам основу для быстрого создания желаемого эффекта.