Javascript 设计颜色定制器

关于我的问题，我找到了很多资源，但我只想从高层次的角度对我要做的事情发表看法

基本上，我正在使用Javascript和HTML的组合为朋友的网站构建一个定制程序。我应该首先说我有一些HTML经验，但这是我第一次使用Javascript（我对Java有经验）。最终的目标将是像一个定制的东西，让用户选择一辆自行车的零件，并改变他们的颜色下定制订单

我将自行车的各个部分作为图像文件，并使用位于的jscolor颜色选择器：允许用户从颜色图中选择颜色。我的计划是在同一张照片的副本上分层，只填充其中一张，就像Photoshop中的分层一样。这样，零件将以正确的形状填充，而不是作为图像文件的整个正方形填充。当光标移动时，颜色应实时变化。完成后，他们可以保存零件，颜色记录将保存在后端

由于我是Javascript新手，对HTML没有太多经验，所以我发现让它走上正轨有点挑战性。因此，我希望从一些有HTML/Javascript/CSS经验的人那里得到一些建议，为我指明正确的方向，让这条路走得比目前更好。我不知道如何“表达”我想做的事

我要讲的三个主要部分：

使用HTML按钮加载不同的自行车部件（基本上加载一个单独的图像文件）

将颜色从jscolor选择器添加到选定零件的图像中

当用户单击保存按钮时保存零件的状态

我会继续搜索论坛，因为我已经看到了一些类似于我想做的事情的线索，但我主要想知道我的方法对于我想做的事情是否可行

---

提前谢谢

使用普通的HTML按钮会使事情变得复杂。 我认为利用HTML5画布API是解决这个问题的更好方法。Canvas是HTML5元素，用于帮助您使用JavaScript进行图形操作。了解有关画布的更多信息。

---

您可以利用图书馆，例如，使事情变得更简单。

谢谢您的建议。最后，我使用SVG来获取对象/部件的轮廓。然而，现在我正试图更好地定义形状。我只是对轮廓进行了适当的着色，我想让它更详细，所以我想我需要对路径进行更多的处理。嗯。。。我对SVG不太熟悉：）。我的一个朋友做了一个类似的附带项目，他正在用canvas制作一个“服装定制器”。我想SVG也可以工作。祝你好运。SVG似乎正确地获得了形状的正确轮廓，但它在填充上失去了细节。我看到的不是用颜色填充的形状，而是用纯色填充的形状轮廓。形状的所有复杂细节都丢失了（…所以现在我正在试验SVG设置来保留细节。我正在工作的站点不允许Javascript，除非它构建在一个块中的HTML代码内部，所以我尝试远离繁重的Javascripting