Javascript 使用html5画布单击按钮时更改矩形的位置

我正在使用html5画布创建图像注释来处理银行信用卡表单。当我单击1.name按钮时，我需要更改矩形的位置。矩形应高亮显示到name列2.city高亮显示到city列3.phone高亮显示到phone列请任何人帮助我如何使用下面代码中的按钮单击事件

html5

var c=document.getElementById（“工具草图”）；
var ctx=c.getContext（“2d”）；
ctx.globalAlpha=25/100；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（0,0,150,75）；
函数按钮单击（）{
var c=document.getElementById（“工具草图”）；
var ctx=c.getContext（“2d”）；
ctx.globalAlpha=25/100；
ctx.fillStyle=“#FF0000”；
//将此用作新位置
ctx.fillRect（416216279）；
}
功能按钮Clicked1（）{
var c=document.getElementById（“工具草图”）；
var ctx=c.getContext（“2d”）；
//在这里做你需要的
警报（“改变位置”）；
ctx.globalAlpha=25/100；
ctx.fillStyle=“#FF0000”；
//将此用作新位置
ctx.fillRect（242、359、337、423）；
}
功能按钮Clicked2（）{
var c=document.getElementById（“工具草图”）；
var ctx=c.getContext（“2d”）；
ctx.globalAlpha=25/100；
ctx.fillStyle=“#FF0000”；
//将此用作新位置
ctx.fillRect（245394389416）；

---

这里我正在修复图像坐标，但它与背景图像的精确像素不匹配请帮助

您发布的代码中没有显示“列”或任何类型的表格。如果您想了解如何附加到按钮的单击事件，请使用

onclick=“myClickFunction（）”

---

这里可以看到更多信息：

我需要使用函数更改红色矩形框的位置，因为我在button click Event中使用javascript代码设置图像的像素值。确定，我认为您误解了画布的工作方式。您只是在“绘制”在曲面上，请将此视为删除一个矩形并绘制另一个矩形。如图所示：@user2817874这有助于实现您想要的目标吗？请给我命令以清除该位置的矩形clear@user2817874你读过JSFIDLE链接吗？代码是：ctx.clearRect（0,050500）；//500是任意数量，我想清除整个画布，因此指定了宽度

<div id="content"style="width:1200px; height:500px; overflow:scroll;">
    <canvas id="tool_sketch" width="1200" height="1500" style="background: url(https://www.google.co.in/search?q=credit+card+form&tbm=isch&source=iu&imgil=km2Z3X1TLDJb0M%253A%253Bhttps%253A%252F%252Fencrypted-tbn1.gstatic.com%252Fimages%253Fq%253Dtbn%253AANd9GcRZ-BKzchgpLe1UBl4DMSEheEeI2zZegsVJSA9DS9PcoioWiNrB%253B1275%253B1650%253B9j5RPXytsQNrrM%253Bhttp%25253A%25252F%25252Fwww.kimtrends.com%25252FCredit-card-authorization-form.html&sa=X&ei=rf6vUsbtIcbYrQf6zYHQCw&ved=0CEYQ9QEwAA&biw=1280&bih=642#q=credit+card+form+full+image&tbm=isch&facrc=_&imgdii=_&imgrc=p4RgIAJnWO2cLM%3A%3BmYv6kLtFLnz3IM%3Bhttp%253A%252F%252Fimg.docstoccdn.com%252Fthumb%252Forig%252F69555974.png%3Bhttp%253A%252F%252Fwww.docstoc.com%252Fdocs%252F69555974%252FDiscount-Authorization-Form-Credit-Card-Authorization-Form%3B1275%3B1650) no-repeat  left top;"></canvas>
</div>

<script>
    var c = document.getElementById("tool_sketch");
    var ctx = c.getContext("2d");

    ctx.globalAlpha = 25 / 100;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);

      function buttonClicked() {
      var c = document.getElementById("tool_sketch");
      var ctx = c.getContext("2d");


      ctx.globalAlpha = 25 / 100;
      ctx.fillStyle = "#FF0000";

      // use this as the new position
     ctx.fillRect(416, 241, 625, 279);
  }
  function buttonClicked1() {
      var c = document.getElementById("tool_sketch");
      var ctx = c.getContext("2d");
      // Do what you need here
      alert('change position');


      ctx.globalAlpha = 25 / 100;
      ctx.fillStyle = "#FF0000";

      // use this as the new position
      ctx.fillRect(242, 359, 337, 423);
  }

 function buttonClicked2() {
          var c = document.getElementById("tool_sketch");
          var ctx = c.getContext("2d");
 ctx.globalAlpha = 25 / 100;
          ctx.fillStyle = "#FF0000";

          // use this as the new position
          ctx.fillRect(245, 394, 389, 416);
</script>

<input type="button" id="firstclick" onclick="buttonClicked()" value="name" />
<input type="button" id="secondclick" onclick="buttonClicked1()" value="address" />
<input type="button" id="thirdclick" onclick="buttonClicked2()"  value="phone" />