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

Question

我正在使用 html5 画布创建图像注释来处理银行信用卡表单当我单击 1.name 按钮时我需要更改矩形的位置矩形应该突出显示为名称列 2.city 突出显示城市列 3.phone 突出显示表单中的电话列 请任何人帮助我如何使用以下按钮单击事件代码。

html5

<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" />

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

Answer 1

您发布的代码中没有任何内容显示“列”或任何类型的表格。如果您想弄清楚如何附加到按钮的单击事件，请使用 onclick = "myClickFunction()" 更多内容可以在这里看到：http://jsfiddle.net/3SzKS/