使用事件。客户端（x和y），用于鼠标坐标以生成HTML/JS中的形状
所以我正在尝试制作一个程序，在我单击画布的地方它会在我单击的位置创建一个形状。当我单击时，我无法抓取鼠标的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坐标为我的形状生成位置。任何帮助都将不胜感激。谢谢。
共有1个答案
请尝试我在下面制作的演示：
<!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。然后它会生成一个指定宽度和高度的矩形，并将矩形的中心放在鼠标指针上。
-
本文向大家介绍使用js获取鼠标坐标相关面试题，主要包含被问及使用js获取鼠标坐标时的应答技巧和注意事项，需要的朋友参考一下
-
问题内容： 我想知道如何在基于X，Y鼠标坐标的android上执行拖动吗？ 考虑两个简单的示例，Team Viewer / QuickSupport 分别 在远程智能手机和Windows Paint Pen上绘制“密码模式” 。 我所能做的就是模拟触摸（使用dispatchGesture()和也AccessibilityNodeInfo.ACTION_CLICK）。 我找到了这些相关链接，但不知道
-
我试图画一系列给定坐标的矩形，这只是一个x和y值的列表。 这是我的密码： 此代码应绘制类似以下内容的形状： 相反，它画的东西没有连贯的形状。
-
问题内容： 我正在尝试在matplotlib中实现一个简单的鼠标单击事件。我希望绘制一个图，然后使用鼠标选择积分的上限和下限。到目前为止，我可以将坐标打印到屏幕上，但不能将其存储以供以后在程序中使用。我也想在第二次单击鼠标后退出与该图的连接。 下面是当前绘制并打印坐标的代码。 我的问题： 如何存储图形到列表的坐标？即点击= [xpos，ypos] 是否可以获取两组x坐标以便对该行的该部分进行简单的
-
本文向大家介绍js使用onmousemove和onmouseout获取鼠标坐标的方法，包括了js使用onmousemove和onmouseout获取鼠标坐标的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法。分享给大家供大家参考。具体如下： 下面的js代码演示了onmousemove和onmouseout事件的用法，
-
正如我在标题中指出的，我已经开始开发一个简单的应用程序，它包含在主框架窗口中，一个双缓冲面板。在这个面板中可以绘制一些图形，让我们把这个面板看作是一个简单的视窗，用来显示在里面绘制的元素。 这里添加了两个功能，平移和缩放可以缩放变换，并使用MouseDown和Move事件上更新的增量在paint事件内平移变换，OnMouseWheel用于更新缩放变换。 当缩放大于1（比例100%）时，尝试添加支持