html5操作畫布中的元素

我想知道如何將圖像加載到HTML5畫布中。具體來說，我需要一個腳本，在鼠標懸停的過程中在畫布上交換另一個圖像，原始圖像淡出。我是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>

這是正確的方向嗎？

來源

2012-02-22 hkguile

您可以在沒有HTML5 Canvas的情況下執行此操作。要在鼠標上交換圖像，最簡單的方法是使用名爲jQuery的JavaScript框架，在此免費獲取：http://jquery.com/。

使用jQuery所有你需要做的就是像下面這樣：

首先，創建一個圖像標籤。

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

Next添加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(); 
    });

有很多方法可以做到這一點和上面的代碼沒有經過測試，但應爲您提供一個基礎，以快速創建所需的效果。

來源

2012-02-22 04:27:57

我想學習HTML5，而不是jQuery – hkguile 2012-02-22 05:06:09

html5操作畫布中的元素

回答

相關問題