0

所以我正在尝试制作一个程序，我在画布上单击它会在我单击的位置创建一个形状。当我单击时，我无法抓取鼠标 x 和 y 坐标并用于我的形状的 x 和 y 坐标

我的 HTML 代码：

<!doctype html>
<html lang="en">
<canvas id = "drawBoard" height = '600' width = '1330' style="border:1px solid black";></canvas>
<head>
    <div id = "js">
    <script src = "functions.js"></script>
    </div>
    <div id = "css">
   <link rel = stylesheet type = "text/css" href = "main.css">
    </div>
  <meta charset="utf-8">
  <title> Shape Drawer </title>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>
<body>

<div id="log"></div>

<script id = "jquery">
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "Coordinates: " + event.pageX + " , " + event.pageY );
});

    </script>
 <button id = "circle" onclick = "circleTrue()"> Circle </button>
 <button id = "square" onclick = "squareTrue()"> Square </button>
 <button id = "triangle" onclick = "triangleTrue()"> Triangle </button>
</body>
</html>

我的 JavaScript 代码：

var shape;
var circle = false;
var square = true;
var triangle = false;

function getCoord(event){
var x = event.clientX;
var y = event.clientY;
}

document.getElementById("drawBoard");



document.getElementById('drawBoard').onclick = function() {clickSpawn()};

function clickSpawn{
  fillRect(x, y, 50, 50 );
  fillStyle = "black";
}

function circleTrue() {
    circle = true;
    square = false;
    triangle = false;
}

function squareTrue() {
    circle = false;
    square = true;
    triangle = false;
}

function triangleTrue() {
    circle = false;
    square = false;
    triangle = true;
}

我想弄清楚是否可以使用我的鼠标 x 和 y 坐标作为我的形状的生成位置。任何帮助，将不胜感激。谢谢。

4

1 回答 1

0

试试我在下面做的演示：

<!DOCTYPE html>
<html>
<body>

  <canvas id="canvas" width="500" height="500" onmousedown="draw(event)" style="border:1px solid black;">Your browser does not support HTML 5.</canvas>

  <script>

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var width = 100;
    var height = 100;

    function draw(event){
      var mousex = event.clientX;
      var mousey = event.clientY;
      ctx.fillRect(mousex - (width / 2), mousey - (height / 2), width, height);
    }

  </script>
</body>
</html>

当您单击画布时，上面的程序会获取您的鼠标 x 和鼠标 y。然后它创建一个指定宽度和高度的矩形，并将矩形的中心放在鼠标指针上。

于 2017-11-17T15:44:17.047 回答