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的情况下执行此操作。要在鼠标上交换图像最简单的方法是使用名为jQuery的JavaScript框架，在此处免费获取：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();
    });

有很多方法可以实现这一点，上面的代码没有经过测试，但应该为您提供快速创建所需效果的基础。

html5操纵画布中的元素

1 个答案: