1

私はこのJavaScriptコードを書きます:

<script>
        var canvas = document.getElementById("canvas");
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;

        function handleMouseDown(e) {
            mouseX = parseInt(e.clientX - offsetX);
            mouseY = parseInt(e.clientY - offsetY);
            $("#downlog").html("Down: " + mouseX + " / " + mouseY);
        }

        $("#canvas").mousedown(function(e) {
            handleMouseDown(e);
        });

    </script>

このコードでは、マウス クリックで座標を検出します。この座標の周りに円を描いて、 circle をクリックすると何かをしたい (例: google.com を開く)

注：html 4のjqueryとエリアマップでこれを行いますが、キャンバスには何もわかりません。

4

2 に答える 2

4

円を描きたいのか、円内でマウスのクリックを検出したいのか、その両方なのかわかりません。

円を描く：

var context=canvas.getContext("2d");
ctx.beginPath();

//Draw a circle around a mouse click
//ctx.arc(x-position, y-position, radius, start-angle, end-angle);
ctx.arc(mouseX, mouseY, 30, 0, 2*Math.PI);
ctx.stroke();

円内でのマウス クリックを検出します。

//circleX and circleY are the coordinats of the center
var y = mouseY - circleY;
var x = mouseX - circleX;
var dist = Math.sqrt(y*y + x*x);

if (dist < circleRadius) {
  // Do whatever you want to do
}
于 2013-10-09T14:19:00.053 に答える
0 
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
于 2013-10-09T14:13:00.577 に答える