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

Question

我计划创建一个列出特定产品（例如PC鼠标）的网站，您可以在其中给定一组参数来设计自己的产品。 在这种情况下，您可以更改鼠标的颜色，鼠标滚轮的设计，左右按钮的外观等。我遇到的问题是以某种方式实现它，例如，在鼠标滚轮设计的集合中，我单击某个鼠标滚轮设计，主鼠标图像的鼠标滚轮将更改为选定的鼠标滚轮。 我真的不知道该怎么做（js，html5 canvas？）。 谁能指出我使用的某种工具或技术？ 我一直在搜索google一段时间，但对如何执行此操作丝毫不了解。 提前谢谢您，祝您有美好的一天。

Answer 1

我认为您可能需要预先设计这些图片。 假设您有鼠标图片。 用户可以选择更改其颜色（红色，黄色和粉红色）。 然后，您将需要另外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>

那是你要的吗？