0

大家好，我是 html5 的新手。我已经编写了一个代码，其中我使用了画架JS库。我已经加载了一个图像，我想尝试不同的鼠标事件。我已经在画布上加载了一个图像，它工作正常但是当我将鼠标放在图像上时，我希望我的图像变大。但我不知道为什么它不起作用。任何人都可以指导我我在这里错过了什么是我的代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="EaselJS/lib/easel.js"></script>
<script>
var canvas;
var stage;
var img , pic;
var update =true;
function init() {

    canvas = document.getElementById("canvas");
    stage = new Stage(canvas);
        img = new Image();
    img.src = "picture.png";
    img.onload = setimage;

}
function setimage(event){
  pic = new Bitmap(img);
  stage.addChild(router);   
  pic.x = canvas.width - 90;
     (function(target) {
                pic.onMouseOver = function() {
                target.scaleX = target.scaleY = target.scale*1.2;
                update = true;
                }
     })(pic); 
   Ticker.addListener(window);

}
function tick() {
    if (update) {
        update = false; // only update once
        stage.update();
    }
}

</script>
<style>
 #div1, #div2
{
    float:left;
    width:100;
    height:150;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;}

</style>
</head>

<body onLoad="init()">
<div id="div1">
<canvas id="canvas" width="100" height="150" ></canvas> 
</div>
<body>
</html>

谢谢

4

2 回答 2

1

首先，您必须设置舞台以接受鼠标事件：

stage.enableMouseOver();
于 2012-05-10T11:58:08.140 回答
0

您也可以使用CSS3 缩放变换而不是 JavaScript 来实现这一点。当然，它只适用于支持此功能的浏览器，这可能不是您想要的。

于 2012-03-29T08:50:47.237 回答