所以我正在尝试制作一个程序，我单击画布，它会在我单击的位置创建一个形状。我在单击时无法抓住鼠标 x 和 y 坐标并使用形状的 x 和 y 坐标
我的网页代码：
<!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 坐标作为我的形状的生成位置。任何帮助将不胜感激。谢谢。
试试我在下面制作的演示：
<!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。然后，它制作一个指定宽度和高度的矩形，并将矩形的中心放在鼠标指针上。