如何从小图像创建大图像并使用javascript动态更改它们

我计划创建一个网站，列出特定的产品（如pc鼠标），在那里你可以根据一组参数设计自己的产品。在这种情况下，您可以更改鼠标的颜色、鼠标滚轮的设计、左右按钮的不同外观等。我遇到的问题是如何实现它，例如，在一系列鼠标滚轮设计中，我单击某个鼠标滚轮设计，主鼠标图像的鼠标滚轮将更改为选定的鼠标滚轮。我真的不知道怎么做（js，html5画布？）。有人能给我指一个特定的工具或者一种技术吗？我搜索谷歌已经有一段时间了，但仍然没有一点关于如何做到这一点的想法。提前感谢您，祝您愉快。

我想您可能需要预先设计这些图片。假设你有一张鼠标图片。用户可以选择更改其颜色（红色、黄色和粉色）。然后，你需要另外3张红色、黄色和粉色的鼠标图片。然后，使用Javascript更改图像src。例如：

function ChangeColor(myColor) {
    var pic = document.getElementById("my_pic");
    if (myColor = "red")
        pic.src = "original_red.png";
    else if (myColor == "pink")
        pic.src = "original_pink.png";
    else 
        pic.src = "original_yellow.png";
} 

Html

红色
粉红色
黄色的

---

这就是你想要的吗？

谢谢你的回复，但不完全是这样。颜色可以使用以下技术完成：。我的问题是将图像的一部分更改为另一个图像。例如，默认鼠标滚轮为圆形。我将在主图像中选择一个方形鼠标滚轮，将其更改为方形鼠标滚轮。差不多吧。

<img id="my_pic" src="original.png" alt=""><br><br><br>
<button onclick="ChangeColor('\'red\'');">Red</button>
<button onclick="ChangeColor('\'pink\'');">Pink</button>
<button onclick="ChangeColor('\'yellow\'');">Yellow</button>