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. Чтобы поменять картинку на мышь, проще всего использовать 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(); 
    }); 

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