Javascript-使图像显示在光标处

有没有办法达到类似的效果

是，使用mousemove事件

---

事后看来，这是一个相当愚蠢的回答。所以我将用一个实际的例子来回答这个问题，这个例子展示了如何在HTML5中生成flash文件

如果你能完全理解它是如何工作的，那么在flash中制作同样的东西应该不费吹灰之力。但也要考虑到，我无意中演示的速度比Flash演示更快速，更稳定，所以你可以考虑使用HTML5进行下一个项目。 我举的例子是，无需进一步讨论，我将从HTML开始逐行分解：

<canvas id="canvas" width="400" height="300">
    Your browser does not support the HTML5 canvas. <br>
    Get or upgrade to a modern browser like Google Chrome or Mozilla Firefox.
</canvas>

这将获取绘图上下文，该上下文提供允许您在画布上绘图的方法。目前，唯一的参数是“2d”，但有一个参数“实验性webgl”，允许使用称为web gl的实验性3D技术，但需要一个好的视频卡。我相信这只适用于像Google Chrome这样的Webkit浏览器和像Firefox这样的Gecko浏览器

注意：在我测试过的每个浏览器中，您不必使用document.getElementById方法通过id获取项目。只要id存在于HTML中，就会在加载时生成一个包含每个元素id并以该属性命名的变量列表。当然，这意味着您必须将标记放在HTML的下面，而不是上面，这样就可以预先加载DOM和节点列表

mouse = [0,0];
imgLoaded = false;
trail = [];

这些变量用于跟踪鼠标位置、图像是否已加载、轨迹和图像大小。鼠标是一个数组，它保存鼠标的X和Y坐标，每次鼠标移动时都会更新，imgLoaded在后面的函数中设置为true，以指示图像已加载，以便正确绘制，trail是一个数组，它保存自演示开始以来的每个鼠标位置，它保存有用于绘制轨迹的坐标的数组，并随鼠标一起更新

这段代码创建一个图像，将其源设置为保存Me Gusta图片的可靠服务器，并更新imgLoaded布尔值以指示现在可以绘制图像，而不是在加载时绘制图片

canvas.onmousemove=function(e){
    var X,Y;
    if(e.clientX){
        X = e.clientX;
        Y = e.clientY;
    }else{
        X = e.pageX;
        Y = e.pageY;
    }
    mouse = [X,Y];
    trail.push(mouse);
};

此事件函数（在事件上运行的一种特殊类型的函数）绑定到画布，当它运行时，它从传递到参数中的e变量中获取鼠标位置。完成此操作后，它会将坐标添加到轨迹数组中

Javascript:

var img = document.getElementById('img') var Main = { IN: function() { img.innerHTML = '<img src="img.jpg"></img>' }, OUT: function() { img.innerHTML = 'I am a placeholder' } } //I used an object to hold the functions and keep them uniform img.onmouseover = Main.IN img.onmouseout = Main.OUT​ //these events call the function

---

到目前为止你试过什么？这不是Yahoo Answers…如果您需要解决方案，请发布一些相关代码。

img = new Image();
img.onload = function(){
    imgLoaded = true;
};
img.src = 'http://images.encyclopediadramatica.se/0/0a/Me_gusta_original.png';

canvas.onmousemove=function(e){
    var X,Y;
    if(e.clientX){
        X = e.clientX;
        Y = e.clientY;
    }else{
        X = e.pageX;
        Y = e.pageY;
    }
    mouse = [X,Y];
    trail.push(mouse);
};

UPDATE = function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(imgLoaded){
        for(var i = trail.length-50;i<trail.length;i++){
            if(trail[i]){
                ctx.drawImage(img,trail[i][0],trail[i][1],100,100);
            }
        }
    }
    setTimeout(UPDATE,1000/60);
};
UPDATE();

<div id="img"> i am a placeholder </div> var img = document.getElementById('img') var Main = { IN: function() { img.innerHTML = '<img src="img.jpg"></img>' }, OUT: function() { img.innerHTML = 'I am a placeholder' } } //I used an object to hold the functions and keep them uniform img.onmouseover = Main.IN img.onmouseout = Main.OUT​ //these events call the function