使用 event.client (x 和 y) 用于鼠标坐标以在 HTML/JS 中生成形状
Posted
技术标签:
【中文标题】使用 event.client (x 和 y) 用于鼠标坐标以在 HTML/JS 中生成形状【英文标题】：Using event.client (x and y) to use for mouse coordinates to spawn a shape in HTML/JS 【发布时间】：2018-04-04 18:04:01 【问题描述】：所以我正在尝试制作一个程序，我在画布上单击它会在我单击的位置创建一个形状。当我单击时，我无法抓取鼠标 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 坐标作为我的形状的生成位置。任何帮助，将不胜感激。谢谢。
【问题讨论】：
这里缺少很多代码。另外，与问题无关，<canvas> 元素不能放在这里，它必须是 body 的后代。
您只是使用了错误的事件属性。把它们全部记录下来，你想要的（干净的标签相对）就在那里。
单击画布时，您调用的是clickSpawn，但x 和y 是在何时何地定义的？在getCoords?它没有被调用，x 和 y 也是该函数的本地函数。
【参考方案1】：
试试我在下面做的演示：
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" 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。然后它创建一个指定宽度和高度的矩形，并将矩形的中心放在鼠标指针上。
【讨论】：
以上是关于使用 event.client (x 和 y) 用于鼠标坐标以在 HTML/JS 中生成形状的主要内容，如果未能解决你的问题，请参考以下文章