Bootstrap模式下的Canvas给出了错误的鼠标坐标
在Bootstrap模式下，Canvas是HTML5中的一个元素，用于绘制图形、动画和其他可视化效果。它提供了一个二维绘图的环境，可以通过JavaScript来操作和绘制图形。
对于给出错误的鼠标坐标的问题，可能有以下几个原因和解决方法：
- 坐标系问题：Canvas的坐标系原点默认在左上角，而鼠标事件的坐标系原点在页面的左上角。因此，需要将鼠标事件的坐标转换为Canvas的坐标。可以通过以下代码实现坐标转换：
canvas.addEventListener('mousemove', function(event) {
var rect = canvas.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var mouseY = event.clientY - rect.top;
// 在这里处理鼠标移动事件，使用转换后的坐标
});- Canvas大小问题：如果Canvas的大小与实际显示的大小不一致，会导致鼠标坐标计算错误。确保Canvas的大小与实际显示的大小一致，可以通过CSS样式或JavaScript动态设置Canvas的宽度和高度。
- 其他代码问题：检查其他与鼠标事件相关的代码，例如是否有其他事件监听器干扰了鼠标事件的触发，或者是否有其他代码修改了Canvas的坐标或大小。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）提供了弹性计算能力，可用于部署和运行各种应用程序，包括前端开发、后端开发、数据库、服务器运维等。您可以通过腾讯云官网了解更多关于腾讯云云服务器的信息：腾讯云云服务器
请注意，以上答案仅供参考，具体解决方法可能因具体情况而异。
相关·内容
1回答
我一直在尝试从缩放的画布中获取鼠标坐标。scale(canvas.scale，scale)给出了正确的坐标，但是如果我使用canvas.scale(scale，scale，pivotX，pivotY)，那么坐标是错误的。
//onDraw
canvas.scale(scaleFactor, scaleFactor); //default pivot x & y = 0, 0
//canvas.scale(scaleFactor, scaleFactor, pivotX, pivotY);
private float pixelWidth = 480;
private float pi
浏览 18提问于2020-02-09得票数 0
1回答
按照的说明，我有一个div正在被克隆，其中包含一个p5画布。克隆它时，画布对鼠标坐标没有响应。
如何使p5画布在克隆后仍然处于活动状态？
$(document).ready(function() {
$(".showcanvas").click(function() {
// Find the original canvas element
var origCanvas = $(".canvas").first().find('canvas')[0];
// Clone the div wrapper
浏览 1提问于2018-10-22得票数 1
回答已采纳
2回答
我有一个单一游戏(2D)，我正在制作，当我试图获得鼠标坐标，他们是错误的。我不知道问题是什么，但这是我得到坐标的代码：
MouseState mouseState;
mouseState = Mouse.GetState();
test = new Tower(TowerTexture, new Vector2(mouseState.X, mouseState.Y));
//test is drawn where mouse pointer is thought to be and it is drawn off
这是塔形图代码：
foreach (Tower tower in tow
浏览 3提问于2014-01-28得票数 0
回答已采纳
3回答
我使用下面的函数来获取鼠标点击的位置(坐标)。
$('#myCanvas').on('click', function(e) {
event = e;
event = event || window.event;
var canvas = document.getElementById('myCanvas'),
x = event.pageX - canvas.offsetLeft,
y = event.pageY - canvas.offsetTop;
alert
浏览 1提问于2013-06-27得票数 3
回答已采纳
我正试图将鼠标附加到画布上，然后鼠标移出画布上的事件：
默认画布是函数drawcircle的画布。
如果用户通过画布，则应该将其更改为drawEllipse的画布，当他退出时，应该将其更改为drawCircle。
此外，当用户按下小型lightblue循环(警告消息)时，我希望在屏幕上打印一条消息。
我读到，我必须定义：mouseup和mousedown，鼠标过去和鼠标出来，但我真的不知道怎么做。
也许是这样：
getPressedCanvasPixel('canvas');
function getPressedCanvasPixel(canvasElement) {
浏览 4提问于2013-12-13得票数 0
回答已采纳
我试图将PDF页面分成两个相等的部分，并向其中添加数据。首先，我想将数据完全添加到前半部分，然后添加到第二部分。我现在遇到的问题是在第一段和分隔线之间留有空格，这是我不想要的。我希望内容得到充分的展示。
以下是示例代码：
new Rectangle(16, 36, 340, 806),
new Rectangle(305, 36, 559, 806)
这是我认为不准确的直角坐标，给出了这个问题。这就是我要补充的地方：
while (ColumnText.HasMoreText(ct.Go()))
{
if (side_of_the_page == 0)
{
浏览 1提问于2014-06-06得票数 0
我创建了一个使用jQuery的页面，允许您在单击时根据鼠标坐标在页面上放置<div>s。
这是javascript：
$('document').ready(function() {
$("#canvas").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$(document.createElement('div')).css({'left':x +
浏览 0提问于2010-04-25得票数 1
回答已采纳
1回答
我在画布上有一堆SVG路径形状。
但最初我转换了画布的坐标系，所以它只适合单位圆，y向上增加。例如，(.9，.9)将朝向画布的右上角：
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
window.requestAnimationFrame(vsync);
function vsync() {
var canvas = doc
浏览 1提问于2015-04-13得票数 0
我想要创建这个像素效应来自。
虽然我能够在全屏画布上实现整个像素效果：
const canvas = getElementById('canvas');
canvas.height = window.innerHeight; // Gives the canvas height of fullscreen
canvas.width= window.innerWidth; // Gives the canvas width of fullscreen
很容易得到鼠标的坐标
const mouse = {
x: undefined,
y: undefined
}
canv
浏览 4提问于2022-11-24得票数 0
2回答
检查鼠标点击
、、
此代码应检查鼠标位置，如果鼠标单击在控制台中显示此X和Y位置，但它忽略了单击事件，并在控制台中打印鼠标坐标而不显示单击。
我该如何解决这个问题？
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove',
浏览 0提问于2018-10-27得票数 0
我在页面上有一个一定大小的HTML5画布
<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">
现在，当鼠标被拖动到画布上时，画布就会被绘制出来(即首先单击(不一定在画布内)，然后开始拖动鼠标而不释放)下面的脚本；
$(function () {
var c = document.getElementById("canvas");
var context = c.getContext(&
浏览 1提问于2013-08-26得票数 0
回答已采纳
1回答
我使用下面的代码来获取鼠标位置的像素坐标。
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
startPoint = e.GetPosition(this);
}
但是，如果用户使用滚动条向下移动一点，则此代码不起作用。我得到了错误的坐标，对象无法在鼠标位置下绘制。知道这是怎么回事吗？
浏览 1提问于2011-09-20得票数 2
回答已采纳
当没有滚动条时，我可以在画布上测试鼠标坐标：
var mx = evt.clientX - canvas.offsetX
var my = evt.clientY - canvas.offsetY
然而，当我向下滚动网页，我重新定位鼠标坐标是倾斜的。
有什么建议吗？
浏览 0提问于2016-05-01得票数 1
回答已采纳
2回答
我有一个在画布元素上渲染的webgl。渲染后，我希望允许用户使用鼠标(例如rect)在其上绘制。由于getContext第二次不工作，我在我的webgl画布上添加了另一个透明画布，我想用鼠标在透明画布上绘制一个矩形。问题是mousedown事件中的坐标与上下文坐标非常不同
我的画布如下
<div id="container">
<canvas id="webglCanvas" tabindex='1'></canvas>
<canvas id="transCanvas" tabin
浏览 33提问于2019-11-29得票数 0
1回答
我有两个图形和一个鼠标移动功能，可以打印出他们所在的画布的坐标。如何才能使鼠标移动函数仅在鼠标悬停在其中一个图形上时才被调用。
self.ax.imshow(matrix,cmap=plt.cm.Greys_r, interpolation='none')
self.ax.imshow(matrix2,cmap=plt.cm.Greys_r, interpolation='none')
def motion_capture(event)
print event.xdata
print event.ydata
self.canvas = Fi
浏览 1提问于2013-03-09得票数 3
回答已采纳
我很难得到鼠标坐标和英雄坐标。
当我点击画布右下角时，鼠标点击就会得到x= 641，y= 386的结果。敌人的坐标系统是100%的精确。
敌人的坐标系似乎与鼠标坐标系不同。我希望他们在一个单一的坐标系上。谢谢你的帮忙!
这是画布的初始化：
<canvas id="canvas" width = "1664" height = "1000" style = "border:1px solid gray; width: 640px; height 480px;"> </canvas>
function get
浏览 3提问于2015-10-08得票数 0
我需要在我的应用程序中跟踪鼠标相对于<canvas>元素的位置。目前，我有一个mousemove事件侦听器附加到<canvas>，每当它触发时更新我的鼠标位置，当可用时使用offsetX/offsetY，当offsetX/Y不可用时使用layerX/layerY。使用offsetX/Y或layerX/Y可以获得相对于<canvas>的鼠标坐标，这正是我想要的。随着我的应用程序发挥它的魔力，各种CSS3D转换被应用到<canvas>上，即使<canvas>经过了很大的转换，offsetX/Y仍然可以在<canvas>的本地转
浏览 1提问于2014-09-24得票数 1
1回答
问题是：
我们有一个大画布(带卷轴)在一个div中，有一个背景图像，如果我们试图画它，坐标是不一样的。
为了显示我们在mousemove函数中绘制的问题，在0,0坐标下的位置是可以的，但是如果我们继续在图像中向右或向下移动，则绘制圆圈和鼠标的差值就会越来越大。
如果鼠标靠近左上角，圆周处的差值很小，但是如果我们接近右下角，差是几百个像素。
一个div里面的帆布：
<canvas style="width: 1500px; height:800px;" id="myImage" width="1947" height="949"
浏览 3提问于2017-12-27得票数 0
回答已采纳
我尝试查看窗口坐标和画布坐标之间的区别，方法是给画布一个回调，在这两种类型中打印鼠标单击的坐标。我希望这两种类型的坐标有不同的值，但它们没有。此外，我试图将窗口坐标传递给find_closest方法，该方法如中所述，接受画布坐标，并且没有出现错误。
import tkinter as tk
def callback(event):
canvas = event.widget
print()
print("Window x-coordinate:", event.x)
print("Window y-coordinate:", e
浏览 2提问于2020-11-21得票数 2
回答已采纳
1回答
背景
我正在使用浏览器HTML5画布元素。
我有一些代码(我在网上找到了)，它允许我在这个画布上画一个矩形。
问题
我想应用一个‘孵化’效果，如在图像中显示的，而鼠标移动事件正在触发。如何才能做到这一点？
电流法
我的当前方法是在触发mouseMove事件处理程序时检查鼠标的x和y坐标。如果x和y坐标与原始坐标的差值大于预定的增量或与矩形的宽度和高度的比值，我将尝试在x和y方向的等距坐标之间画直线/s。
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="
浏览 10提问于2022-01-12得票数 2
回答已采纳
我有两个相同的画布，我用鼠标在上面画，第三个画布(仍然是相同的宽度和高度)，我想在上面有另外两个的“组合”，只显示重叠的像素，这意味着那些与最初的两个画布具有相同坐标的画布。 类似于： const left = document.querySelector('#canvasLeft');
const right = document.querySelector('#canvasRight');
const combined = document.querySelector('#canvasCombined');
const d
浏览 9提问于2021-01-29得票数 1
回答已采纳
1回答
目前，我有一个函数，可以检测和报告鼠标单击画布的位置。我需要它做的是报告第一次点击，然后画一个矩形到鼠标，直到它检测到第二次点击。下面是画布项的代码：
Canvas = Canvas(FrameFractal,height = 300,width = 496)
Canvas.pack()
StartImage = ImageTk.PhotoImage(master=FrameFractal , file = "Program files\Show.png")
ImageContainer = Canvas.create_image(250,150, image=StartIma
浏览 4提问于2021-12-10得票数 0
我正在处理一个图像加载系统，为了让它在移动上工作，我需要为我当前的视图获取画布中心的坐标。它应该返回相同的结果，就像我鼠标在中间。
我试着问布料js github，他们给了我这个:但这个结果给了我一半的画布高度和宽度，每次。有人能帮我理解原因吗？
var myCenterCoordinates = fabric.util.transformPoint({
x: canvas.width / 2,
y: canvas.height / 2,
}, fabric.util.invertTransform(canvas.viewportTransform));
如果我鼠标移动到画布的正中(我
浏览 3提问于2019-10-28得票数 1
回答已采纳
我正在使用Vaadin，并试图将画布部分用于一些简单的涂鸦。为了实现这一点，我使用了Vaadin的库，它运行得很好，但我不知道如何让它擦除我绘制的内容。
当用户单击时，我得到坐标并开始在那里绘图：
canvas.beginPath();
canvas.moveTo(relativeX, relativeY);
然后，在下一次鼠标运动中，我开始从它们画的线连接起来：
canvas.lineTo(relativeX, relativeY);
canvas.setStrokeStyle(color);
canvas.stroke();
和当他们点击擦除我调用：
canvas.setGlobalAlp
浏览 6提问于2015-02-20得票数 0
回答已采纳
目标是在图像上单击我的鼠标两次，并检索2个坐标。这样做的守则：
class ImageListener(object):
def __init__(self):
self.coordinates = []
def onclick(self, event):
print(event.x, event.y)
self.coordinates.extend([event.x, event.y])
def show_image(self, img, close=True):
fig = plt.figure()
ax = fig.add_subplot(1
浏览 1提问于2017-05-21得票数 1
回答已采纳
我正在尝试创建当鼠标左键单击时获取鼠标指针位置的代码。但是当使用下面的代码时，它只在鼠标左键单击时返回一次鼠标指针位置，为了再次获得鼠标位置，必须释放并再次单击按钮。如何修改此代码，以便在鼠标左键单击时，鼠标指针的坐标每0.1秒返回一次。因此，代码将检测鼠标左键是否被按住 var canvas = document.getElementById('canvas');
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect()
co
浏览 51提问于2019-10-13得票数 1
回答已采纳
1回答
我在做绘图申请。因为我想要与数学图相同的行为，所以我将下面的转换应用到带有数据点的画布上：
<UserControl.Resources>
<TransformGroup x:Key="CanvasTransform">
<TranslateTransform X="30" Y="30"/>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY="
浏览 1提问于2014-02-01得票数 4
回答已采纳
1回答
我在Scrollviewer中有一个画布(ZoomMode=为“true”)。在画布中有一个网格，我可以用鼠标移动它 <ScrollViewer ZoomMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Canvas x:Name=
浏览 11提问于2020-04-26得票数 0
回答已采纳
我正在尝试获取鼠标在图像上单击的坐标。所以我像这样使用getBoundingClientRect
function showCoords(canvas, event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
console.log("x: " + x + " y: " + y);
}
但是我得到了这个错误："canvas.getB
浏览 1提问于2018-01-17得票数 13
回答已采纳
1回答
我正在一个画布上工作，现在我需要找到鼠标的坐标，这样我就可以在画布内制作“按钮”。但是，当我尝试捕获坐标并在函数中使用它们来确定鼠标是否在按钮内时，它不起作用。
我的坐标检索方法有什么问题？这是我和我的朋友为学校项目制作的一个游戏。
代码如下：
<!-- game canvas -->
<canvas id="canvas" width="900" height="600">
<!-- no-support message -->
Se está a ver isto, o seu browser não s
浏览 0提问于2012-02-22得票数 0
回答已采纳
XAML
<Canvas x:Name="cvsBurstImage" MouseLeftButtonDown="cvsBurstImage_MouseLeftButtonDown" Style="{StaticResource BurstCanvasStyle}">
<Viewbox x:Name="vbBurstImage" Style="{StaticResource ViewboxCanvasStyle}">
<Image x:Name="
浏览 1提问于2011-07-21得票数 0
1回答
我一直试图以编程的方式模拟鼠标单击画布元素上的任意坐标。由于技术上的限制，我需要避免jQuery，这将使这更容易。
使用答案，我能够获得手动点击的坐标。
使用答案，我可以编程模拟鼠标点击。但不幸的是，我需要对它进行去jQuery化，我认为这是我遇到问题的地方。
如果我想做这样的事情：
document.querySelector("canvas").dispatchEvent(new Event("mousedown", {pageX: 1, pageY: 1}));
或
document.querySelector("canvas").disp
浏览 1提问于2022-01-29得票数 0
回答已采纳
我正在尝试使用HTML5画布元素。我要做的一件事是设置一个mousemove事件来跟踪画布上的鼠标，用于绘图和其他目的。我还没有找到一个明确的答案，如何获得准确的坐标，在画布，鼠标已经结束。我在web上找到了一个具有此html的教程(我在画布中添加了背景色，以使其在呈现的页面上变得明显)：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
浏览 4提问于2016-11-30得票数 4
2回答
我有一个简单的剑图像(画上)，这是在一个‘开放世界’游戏设置，这样玩家可以在世界各地移动到所有的坐标。我想用剑指着老鼠。
我的问题(我认为)是世界坐标和网页坐标不匹配。例如，播放器可能在位置(6000,6000)，而鼠标坐标将仅在0到1600之间(或任何宽度的屏幕)。最重要的是，网页并不总是在同一个地方存在。
到目前为止的想法：
所以我需要计算鼠标相对于画布的位置，反之亦然。
我用的配方。这在我为XNA开发的一个旧项目中起了作用：
var xdir = mouse.x - swordcenter.x;
var ydir = mouse.y - swordcenter.y;
var theta
浏览 3提问于2014-07-14得票数 2
1回答
我试图从一个鼠标侦听器中获取鼠标坐标，但它们是未定义的。鼠标侦听器将被添加到画布中，监听器将触发onMouseMove函数，但是传递的事件似乎没有为鼠标位置定义任何x或y坐标。
我尝试了以下变量: event.pageX、event.pageY、event.clientX、event.clientY、event.y .x、event.y.y
对于我做错了什么会导致鼠标坐标出现不确定有什么想法吗？谢谢你的帮助！
<script>
var boxes;
var canvas;
var context;
$(document).ready(function() {
canva
浏览 0提问于2013-11-14得票数 0
回答已采纳
2回答
我正在尝试使用tkinter模块制作一个类似幻灯片的程序。以下是我所做的工作：
from tkinter import *
root = Tk()
photo = PhotoImage(file = "image.jpeg")
w = Label(root, image=photo)
w.pack()
def callback(event):
print ("clicked at", event.x, event.y)
##canvas= Canvas(root, width=800, height=500)
canvas= Canvas(ro
浏览 0提问于2021-01-09得票数 0
我做了一个光线投射器来使画布中的一些物体相交。如果canvas在窗口浏览器中是单独的，它工作得很好，但如果我将canvas放在其他GUI中，它就不会相交，所以canvas的位置是不同的。我认为这是鼠标坐标的问题。我怎么调试它？如果我知道鼠标坐标，我怎么能理解画布的坐标呢？
function getPosition(event) {
// TODO: add the border of the canvas
var x = new Number();
var y = new Number();
if (event.x != undefined && event.y != und
浏览 2提问于2015-04-23得票数 5
3回答
我希望将画布鼠标坐标传递给一个函数，该函数以鼠标的坐标为中心，以交互方式生成一个圆。因此，我使用以下函数对其进行规范化：
var mousePositionX = (2*ev.clientX/canvas.width) - 1;
var mousePositionY = (2*ev.clientY/(canvas.height*-1)) + 1;
但是，这只适用于屏幕中心。移动鼠标时，光标不再位于圆周的中心：
鼠标光标移离屏幕中心越远，离圆周中心的位置就越大。以下是一些相关代码：
body {
border: 0;
margin: 0;
}
/* make the
浏览 8提问于2017-02-18得票数 2
回答已采纳
1回答
在我的项目中，我尝试使用按钮激活鼠标绑定来创建缩放功能，但它只缩放画布，并且我放在画布上的图像不会放大和缩小。这是我的缩放和平移代码。
def zoom():
canvas.bind("<MouseWheel>", zoom1)
canvas.bind('<ButtonPress-1>', lambda event: canvas.scan_mark(event.x, event.y))
canvas.bind("<B1-Motion>", lambda event: canvas.sc
浏览 0提问于2021-04-30得票数 0
我正在尝试让当你点击画布时，鼠标的坐标上会出现一个圆圈。当我点击画布时，圆圈可能会低300像素。 我尝试从pageX/Y、clientX/Y和screenX/Y进行更改。 <canvas id="canvas" class="canvas" width="300px" height="200px" style="border: 1px solid #000; Padding-bottom: 100px;">
</canvas>
<script>
window.o
浏览 14提问于2019-08-22得票数 0
回答已采纳
1回答
用鼠标在画布上画铬
、、、、
我正试着用鼠标在画布上画画。我的应用程序在firefox中运行良好，但我无法实现它在chrome中的工作。我的代码如下：
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
scaleX = canvas.width / rect.width, /*relationship bitmap vs. element for X*/
scaleY = canvas.height / rect.height; /*relationship
浏览 1提问于2017-11-06得票数 0
回答已采纳
在Skiasharp中，我有一个转换矩阵，我将它应用于画布上，以移动路径并跟踪鼠标的位移。目前，我从鼠标坐标计算一个transformMatrix，所有操作都很好：
canvas.Save(); // Save the actuel transform matrix
SKMatrix ZoomMatrix = canvas.TotalMatrix.PostConcat(transformMatrix);
canvas.SetMatrix(ZoomMatrix); // Apply the matrix for actual Tran
浏览 3提问于2021-09-19得票数 0
回答已采纳
我正在尝试根据鼠标的位置在SVG元素上动态绘制东西。不幸的是，我很难将鼠标坐标从mousemove事件转换到SVG元素的坐标空间。
下面是我一直在测试的一个buggy函数：
CylinderDemo.prototype.handleMouseMove = function(evt)
{
debugEvent = evt;
var bcr = evt.target.getBoundingClientRect();
var x2 = evt.clientX - bcr.left;
var y2 = evt.clientY - bcr.top;
conso
浏览 0提问于2014-01-06得票数 4
回答已采纳
2回答
这似乎是一个简单的问题。我有一个画布应用程序，我正在使用Processing.js编写，我希望它出现在网页的背景中。为了实现这一点，我使用了以下css：
#canvas-back {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
其中canvas-back是包含实际画布的div的id。画布本身被设置为具有html body元素的宽度和高度。这为我正确地呈现了(背景中的画布，在我的html内容下面)，但是我不能再捕获变量mouseX和mouseY ( processing.js用来获取鼠标坐标)。
我如何解
浏览 1提问于2010-11-13得票数 2
回答已采纳
我正在尝试获取鼠标光标的坐标，并在鼠标离开KineticJS阶段时执行操作。但是我需要获得鼠标相对于舞台画布的坐标。因此，当鼠标光标从左边缘离开舞台时，坐标应为0，当鼠标光标从顶部离开时，y坐标应为0，无论舞台放置在网页中的哪个位置。我写了一个函数，但我在控制台中得到了NaN。
容器是放置舞台的div
function checkBounds(e) {
var canvas = document.getElementById("container");
console.log(e.clientX - stage.getX() + "," + e.
浏览 2提问于2013-04-02得票数 0
回答已采纳
1回答
我怎样才能防止画布上的划痕停止断裂？
放大下面的图像(鼠标滚动)
绘制的黑色矩形上的像素断点
编辑：添加lineWidth/2像素以启动坐标解决问题
// grab the DOM SVG element that you want to be draggable/zoomable:
const element = document.getElementById('scene');
// and forward it it to panzoom.
panzoom(element);
const c = document.getElementById("my
浏览 0提问于2019-07-26得票数 0
我正在测试HTML <canvas></canvas>标签，以便在我的网站中为创建一个普通的JavaScript游戏。
在使用ctx.fillRect(955, 0, 5, 5);测试画布的宽度和高度时，我想知道如何使用console.log();检测JavaScript形状，因为它们的笔画/边框溢出或超出了<canvas></canvas>边框的界限。
此外，我还想知道如何让JavaScript使用console.log();检测图像及其边界溢出的HTML边界，因为我将切换到游戏中的图像而不是形状。
此外，如何使用<canvas>&
浏览 3提问于2020-04-01得票数 0
回答已采纳
2回答
我的用户应该能够在画布上通过鼠标移动(或旋转)一个对象。当鼠标事件发生时，屏幕坐标用于计算最后一个事件的增量(方向和长度)。没什么特别的。
鼠标向下(得到第一个坐标)
mousemove (获取第n坐标，计算deltaXY，用deltaXY移动对象)
mouseup (与步骤2相同，并停止mousemove和mouseup事件处理)
在这一系列事件之后，应该可以重复相同的操作。
在删除toRx调用之后，这个过时的示例可以正常工作。但是这里确定了到第一个坐标的增量：
下面是我从示例中调整代码的工作：
@Component({
selector: 'home'
浏览 9提问于2016-03-17得票数 20
回答已采纳
尝试获取鼠标指针的坐标以显示在画布上鼠标所在的位置。下面是代码。我可以让文本显示，但找不到显示鼠标本身坐标的技巧。任何帮助都将不胜感激。
from tkinter import *
width = 250
height = 250
class MainGUI:
def __init__(self):
window = Tk()
window.title("Display Cursor Position")
self.canvas = Canvas(window, bg = "whi
浏览 0提问于2013-10-23得票数 1
在画布上获取鼠标坐标总是有效的，除非我必须滚动，然后它就出错了。当y在画布上时，它最终可能是一个负数。下面是我的代码：
代码块创建画布：
var width = (document.getElementById('assessmentSectionForm' + platform).clientWidth);
var height = Math.round(theSection.thePicture.ySize * (width / theSection.thePicture.xSize))
var canvas = buildCanvas(Ma
浏览 1提问于2015-01-28得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
