javascript - 在鼠标轨迹中显示图像

标签 javascript image html mouse trail

我有两张图片,一张是黑白的,一张是彩色的。我想要做的是让用户将鼠标拖到顶部的黑白图像上,以便显示下面的彩色版本。

我不想不得不使用 Flash。有什么想法可以用 HTML 5 或 Javascript 完成吗?

最佳答案

我还没有试过这个,但它应该可以工作:

  1. 在隐藏的 IMG 标签中加载黑白图像
  2. 加载 IMG 时,使用 drawImage() 将其内容绘制到 CANVAS 对象中。 ( Canvas 绝对位于带有彩色图像的 IMG 之上)
  3. 编写 javascript,在鼠标拖动时从 Canvas 上删除像素(即将其 alpha 设置为零)

注意:IE8 或更早版本不支持 canvas 对象:http://en.wikipedia.org/wiki/Canvas_element#Support

关于javascript - 在鼠标轨迹中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10824343/

相关文章:

html - 悬停不适用于 SVG 路径的未填充区域

javascript - 样式化插入到 Shadow DOM 中的内容

javascript - AngularJS - 使用指令显示图像

javascript - Ember JS,将输入标签值作为操作 handle 中的参数传递

c# - 如何检测两张图片是否相似?

javascript - 尝试使用 slider 更改 div 背景颜色

javascript - 滚动动画触发完成处理程序两次

android - 无法打开捕获的或图库中选择的图像

c# - 如何使用httpwebrequest从网站拉取图片到本地文件

javascript - 设置 contenteditable 元素的最大大小