Question

通过在YouTube上关注一些教程，我一直在努力学习JavaScript。我想要一张照片跟随游标运动。当我启动网站时，加载需要很长时间。当它最终完成时，没有任何反应。这是代码：

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Animation</title>
</head>

<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
Upgrade to a modern browser
</canvas>
</section>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/Animation.js"></script>
<script>
    $(document).ready(function(){
        AN.initialize();
    });
</script>
</body>
</html>

的JavaScript

var AN = AN || {};

pic = new Image();

AN.initialize = function()
{
    window.addEventListener("mousemove", An.moveMouse, false);

    cv = $('#canvas')[0];
    canvas = cv.getContext('2d');

    pic.src = "pictures/test.png";
};

AN.moveMouse = function(e)
{
    canvas.clearRect(0,0,600,400);
    var xPos = e.clientX;
    var ypos = e.clientY;

    canvas.drawImage(pic, xPos, yPos, pic.width, pic.height);
};

无法使用JavaScript使图片跟随鼠标

0 个答案: