javascript - 使用 jquery 或 javascript 为图像着色

Question

我想像这个演示一样为图像的各个部分着色http://www.nickjr.com/kids-games/color-with-dora.html。此演示使用闪存。在javascript或jquery中有没有可能做到这一点？

请提供任何参考。

Answer 1

听起来您在问如何重新创建一个完整的小型应用程序，因此为了将这个答案保持在可管理的长度，我将其简化为两个基本需求：（1）能够单击调色板进行选择一种颜色，（2）用该颜色填充图片的一部分。由于问题相当笼统，因此我对您想要什么做出了很多假设。

示例： jsfiddle 演示

（免责声明：我不知道演示的跨浏览器兼容性如何——它适用于 Chrome 21.0.1180.89 m，这就是我所知道的）。

两个基本部分是这样的：

1. 使用SVG 元素来表示您的图片。图片的各个部分可以通过更改 SVG 元素的“填充”属性来填充。（您可以直接从 Inkscape 或 Adob​​e Illustrator 等绘图应用程序导出 SVG。）

2. 使用 jQuery 将鼠标单击事件与颜色选择相关联，并在更改填充时应用该颜色。

演示中的代码是相当基本的 jQuery 和 SVG。希望这足以让您朝着更具体需要的方向前进。