0

私はhtml5の初心者ですが、クリックイベント時にドットのような画像を作成したいと思います。コンテキストを使用しようとしましたが、残念ながら機能しません。私が使用しているコードは

 document.addEventListener("DOMContentLoaded", init, false);

      function init()
      {
        var canvas = document.getElementById("options");
        canvas.addEventListener("mousedown", getPosition, false);
      }

      function getPosition(event)
      {
        var x = new Number();
        var y = new Number();
        var canvas = document.getElementById("options");

        if (event.x != undefined && event.y != undefined)
        {
          x = event.x;
          y = event.y;
        }
        else // Firefox method to get the position
        {
          x = event.clientX + document.body.scrollLeft +
              document.documentElement.scrollLeft;
          y = event.clientY + document.body.scrollTop +
              document.documentElement.scrollTop;
        }

        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;

        alert("x: " + x + "  y: " + y);
           var b_canvas = document.getElementById("b");
    var b_context = b_canvas.getContext("2d");
    b_context.fillRect(50, 25, 150, 100);

私がどこで間違いをしているのか提案してください。あなたの提案をしてください

4

1 に答える 1

0

それが問題かどうかはわかりませんが、キャンバスにドットを描画するには、パスを開始し、完全に閉じた円弧（0ラジアンから2ピラジアン）を描画して、次のように塗りつぶします。

     b_context.beginPath();
     b_context.arc(x, y, 5 , 0,  2 * Math.PI,true);
     b_context.fillStyle = "blue";
     b_context.fill();

さらに、歪みを防ぐために、cssではなくキャンバスに直接幅と高さを設定することが重要です。（自分で見つけたばかりです;））フィドルの例を完成させてください：http：//jsfiddle.net/wHsMJ/ （テストするには右側の長方形の内側をクリックしてください）

于 2012-06-27T13:00:17.937 に答える