Javascript Html5画布图像，带有部分图像背景，通过单击按钮

我所拥有的：

1） 静态图像和许多部分，或者可以说是矩形框形式的组件（大约25个矩形框，框内有文本，这是一个名称）

2） 我还有25个矩形框的坐标（X1，Y1，X2，Y2） 3） 7角色按钮（前端）

我至今所做的：

我可以剪切图像的一部分并将其显示出来，但使用以下方法看起来不太好：

 canvas_Context.drawImage(img,16,242,60,62,16,242,60,62); //Sodium
 canvas_Context.drawImage(img,934,362,76,49,934,362,76,49); //duke
 canvas_Context.drawImage(img,243,204,274,263,243,204,274,263);

然后通过以下方式显示切割零件：

    var dataUrl = canvas.toDataURL();
    window.open(dataUrl, "toDataURL() image", "width=600, height=200");
    Window.document.write("<p>This is 'myWindow'</p>"); 

var-dataUrl=canvas.toDataURL（）；
打开（dataUrl，“toDataURL（）图像”，“宽度=600，高度=200”）；
Window.document.write（“这是‘我的窗口’
”）；

我的问题是： 1） 当我单击一个角色时，不属于该角色的矩形不应出现

2） 当我单击另一个角色时，我需要只属于该角色的组件。

---

3） 我不想剪切图像，只想更改零件颜色，这不是角色。

你的问题不清楚——至少对我来说是这样。：/你能再解释一遍吗？简单的解释方法看我有一张图片。其中我有25个矩形。现在，当我点击1个按钮时，我需要显示一个矩形而不是另一个。您是否尝试设置点击事件，然后在之后执行相应的操作？可能视觉表现会更清晰。您可以使用

context.clearRect（x，y，width，height）清除矩形区域（如图像的一部分）上下文.clearRect（x，y，宽度，高度）；这是画布id。如何处理图像。我是否必须创建一个图像对象，然后像这样：img.context.clearRect（x，y，width，height），然后我希望它作为一个图像，我使用这个函数：window.open（dataUrl，“toDataURL（）image1”，“width=1019，height=742”）；Window.document.write（“这是‘图像’
”）；