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/

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

1 个答案: