canvas绑定事件的时候 获得鼠标点击的地方在canvas画布内的坐标的方法

最新推荐文章于 2024-05-29 11:16:42 发布
最新推荐文章于 2024-05-29 11:16:42 发布
阅读量8k 收藏 6
点赞数 1
分类专栏： canvas 文章标签： canvas 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanlingdi/article/details/51512759
版权

var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;

再无岁月可回头
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 获取鼠标在canvas上的坐标,获取鼠标在 canvas 中的位置
weixin_39734987的博客
05-30 1842
一般情况一般情况下，如果需要在 canvas 中获取鼠标指针坐标，可以通过监听鼠标的mousemove(如果只需单击时的坐标，可以用click)事件。 当事件被触发时，我们可以获取鼠标相对于 viewport 的坐标(event.clientX,event.clientY)。 同时，我们可以通过 canvas.getBoundingClientRect() 来获取 canvas 相对于 vi...
JavaScript canvas实现跟随鼠标事件
12-28
本文实例为大家分享了用canvas实现跟随鼠标事件的具体代码，供大家参考，具体内容如下 //鼠标移动 展现光片 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <style> body { margin: 0; overflow: hidden; } #canvas { background: #000; } </style> </head> <body> <canvas id=canvas></canvas> [removed] var canvas = documen
关于ctx.addEventListener is not a function的报错问题，以及获取canvas中鼠标点击的位置坐标
qq_49721447的博客
01-13 4238
关于ctx.addEventListener is not a function的报错问题 先插入一段代码，是未修改的代码，会产生ctx.addEventListener is not a function的报错。 var cvs = document.getElementById("myCanvas"); var ctx = cvs.getContext("2d"); ctx.addEventListener("click",function(event){ getpieces(c,e
uniapp通过Canvas绘制网格（心电图，坐标纸等可用）
最新发布
Agont_的博客
05-29 890
通过这段代码，可以将网格的外边距取消，并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好)，通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法，有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除，并且在总函数内，删除对这两个函数的调用即可。同时，将网格的颜色改变，即可实现我之前文档中的心电图同款网格。
网页缩放时精准取到canvas内部触摸坐标
bo_gu的博客
04-17 498
首先我们知道触摸事件拿不到鼠标点击事件的offsetX和offsetY，而canvas画图的时候经常需要用到这两个值，正常页面没有缩放的时候，取clientX，clientY减掉canvas距离顶部的值就可以了。但是网页或者canvas的父盒子有缩放的时候，直接取就不准确了。得到缩放倍数，然后再乘上刚才算好的距离（y值类似）如果大家用vue3写的话，记得.value!也就是紫色盒子减去红色盒子的距离。
Canvas实现以鼠标当前位置为原点缩放及画布拖动（矩阵变换）
astonishqft的博客
03-26 1644
通过矩阵的方式用 Canvas 实现以鼠标当前位置为原点缩放及画布拖动，理解起来更加容易（当然前提是要有一定的数学基础，起码了解过矩阵🤣），大大减少了代码量，同时缩放和拖拽的逻辑可以复用，不仅是在Canvas中，普通的div拖拽和放大也是一样的代码逻辑。
html5中监听canvas内部元素点击事件的三种方法
12-14
在HTML5中，Canvas元素作为一个绘图表面，其内部绘制的图形不具备DOM元素的特性，因此无法直接绑定点击事件。为了实现对Canvas内部图形的交互，开发者需要采取一些技巧来模拟这种行为。本文将探讨三种方法来监听...
canvas实现按住鼠标移动绘制出轨迹的示例代码
09-27
考虑到可能存在的缩放情况，我们需要将窗口坐标转换为画布坐标，公式为`x - rect.left * (canvas.width/rect.width)`和`y - rect.top * (canvas.height/rect.height)`。 实现这个功能的基本步骤如下： 1. 绑定`...
html5 canvas 画雷达图. 实现内部元素的click，mousemove，mouseout事件.
12-11
可以使用`addEventListener`方法为canvas添加点击事件监听器，然后通过`event.clientX`和`event.clientY`获取鼠标点击位置，与雷达图的数据点进行比较，判断点击的是哪个数据点。 - mousemove事件：当鼠标在雷达图上...
html5 canvas鼠标点击拖动粒子动画特效.zip
09-26
为了实现鼠标点击拖动的效果，我们需要监听`mousedown`、`mousemove`和`mouseup`等鼠标事件。当鼠标按下时记录初始位置，移动时更新粒子的位置，松开时停止移动。这通常通过JavaScript的事件绑定函数如`...
微信小程序canvas实现直线自由移动
01-12
4. **重绘逻辑**：在`onTouchMove`事件处理函数中，清除Canvas上的原有图形（`context.clearRect(0, 0, canvasWidth, canvasHeight)`），然后使用新的坐标重新绘制直线。每次移动后都要调用`ctx.draw()`或`this....
如何精确地获取鼠标在canvas里的坐标
niuglar的博客
06-30 3424
考虑点 如果canvas是没有缩放的，在窗口的左上角0,0开始，那鼠标的坐标就等于canvas里鼠标的坐标。但实际开发情况往往不是从原点开始放画布元素。这是需要考虑的有：画布相对于视窗的位置，画布的margin，padding，border-width以及缩放等。直接上代码： 代码 ** * * @param {dom} canvas canvas的dom对象 * @param {event} evt 传入鼠标按下，收起或者移动事件 * @returns {x,y} 返回鼠标在canvas里的x,
Canvas绑定线的事件
guosen8876的博客
03-22 760
1、先将所有的线保存起来。 2、使用isPointInStroke去判断是否在线上 function onClick(e) { // 取得画布上被单击的点 var clickX = e.offsetX; var clickY = e.offsetY; // 查找被单击的线（我这里存储的是两个点） for (var i = 0; i < circlesDot.length - ...
html5 canvas 鼠标坐标,HTML5 Canvas鼠标与键盘事件
weixin_34010461的博客
06-04 390
演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成：// mouse...
canvas画布当中鼠标点击的坐标计算公式
choly192的博客
04-01 1883
// canvas画布当中的画笔坐标万能计算公式 // pointX = (transformOriginX - downX)/scale *(scale - 1) + downX - translateX // pointY = (transformOriginY - downY)/scale *(scale - 1) + downY - translateY // 备注：transformO...
vue 使用canvas做选取并获取相对于图片的比例坐标点
qq_39650950的博客
04-22 2461
图片在canvas中自适应大小并居中。 通常图片大小与canvas的大小是不同的，分为以下几种情况 图片高或宽，超过canvas高或宽 图片高、宽，都超过canvas高宽； 图片高、宽都小于canvas高、宽 问题的本质其实是动态计算图片大小，并在canvas适合的位置画出图片，并能获取选取的坐标点 <template> <div class="app-container"> <el-row :gutter="20"> <el-col :sp
canvas坐标转换屏幕坐标_使用fabric.js转换CANVAS中的鼠标坐标
weixin_42417004的博客
12-23 798
I have designed a ruler using fabric.js and when the user mouses over the specific part of the ruler I want to print to the screen the X-coordinate of the ruler (i.e. not the screen coordinate). Right...
H5学习——canvas与屏幕之间的坐标转换
bruce_zhao1407的博客
02-20 2036
在canvas的使用中，经常会用到鼠标进行交互，但是在交互的过程中难免会遇到一些问题，例如，对于一个居中显示的画布，如图所示 众所周知，canvas的绘制过程中，是以画布的左上顶点为原点进行绘制，假如此时使用鼠标点击事件获取画布左上顶点的坐标，得到的结果为 可见，得到的坐标并非是期望中的（0， 0）或者是和（0, 0）相近的值，这是由于鼠标事件是以document的左上角为原点获取坐标的，因此...
在Canvas上进行标注和自适应分辨率获取标注的绝对精准坐标并完成标注的增删改查
小龙哒的博客
03-05 3077
文章目录1.在canvas上进行标注1、首先先获取鼠标的x,y2、鼠标移入canvas后，鼠标变成标注icon3、点击canvas后，进行标注4、取消绘制2.删除标注1、渲染一个删除按钮在每个标注上 1.在canvas上进行标注 连接后台，需要有添加标注的后端接口 1、首先先获取鼠标的x,y // 获取X 和 Y windowToCanvas(canvas,x,y){ ...
canvas moveTo和lineTo绘制多条路径循环绑定事件
06-06
要绑定循环绘制的多个路径的事件，您可以将路径的坐标存储在数组中，然后使用循环为每个路径添加事件监听器。 下面是一个简单的示例代码： ```javascript // 创建画布 let canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 500; document.body.appendChild(canvas); let ctx = canvas.getContext('2d'); // 定义路径坐标数组 let paths = [ { points: [{ x: 50, y: 50 }, { x: 100, y: 100 }, { x: 50, y: 150 }], color: 'red' }, { points: [{ x: 150, y: 50 }, { x: 200, y: 100 }, { x: 150, y: 150 }], color: 'blue' } ]; // 循环绘制路径和绑定事件 for (let i = 0; i < paths.length; i++) { let path = paths[i]; // 绘制路径 ctx.beginPath(); ctx.moveTo(path.points[0].x, path.points[0].y); for (let j = 1; j < path.points.length; j++) { ctx.lineTo(path.points[j].x, path.points[j].y); } ctx.strokeStyle = path.color; ctx.stroke(); // 绑定事件 canvas.addEventListener('click', function(event) { let x = event.offsetX; let y = event.offsetY; // 检查事件是否发生在当前路径上 ctx.beginPath(); ctx.moveTo(path.points[0].x, path.points[0].y); for (let j = 1; j < path.points.length; j++) { ctx.lineTo(path.points[j].x, path.points[j].y); } if (ctx.isPointInPath(x, y)) { alert('You clicked on path ' + (i + 1) + '!'); } }); } ``` 在上面的示例中，我们定义了一个路径坐标数组 `paths`，其中包含两个路径的坐标和颜色信息。我们使用循环绘制了两条路径，并为每个路径添加了点击事件监听器。在事件监听器中，我们检查事件是否发生在当前路径上，并在点击事件发生时执行相应的操作。 注意，为了避免重复添加事件监听器，我们将事件监听器放在循环外部，而不是在循环内部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值