精华内容
下载资源
问答
  • 圆心为鼠标所在位置,其中圆位置随着鼠标位置移动而移动,js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标,getCanvasPos(canvas,e)方法用于获取鼠标在canvas的坐标canvas以其左上角为起点,并设为(0,...

    以下程序实现了在canvas上画红色的圆,圆心为鼠标所在位置,其中圆的位置随着鼠标位置的移动而移动,js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标,getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标;canvas以其左上角为起点,并设为(0,0),因此当页面包含其他元素的时候,两者坐标不一致,不过在本例中两者坐标是一致的,因为页面只包含一个canvas元素:

    html代码如下:

    <html>  
    <head>
    	<style type="text/css">
    		body{
    			margin: 0;
    			padding: 0;
    		}
    		.my-canvas{
    			margin: 20px;
    			border:10px solid #c3c3c3;
    		}
    	</style>
    </head>  
    <body>  
    <div οnmοusemοve="draw(event)" id="testcanvas">  
    <canvas id="myCanvas" class="my-canvas" width="200" height="100" >  
    Your browser does not support the canvas element.  
    </canvas>  
    <script type="text/javascript" src="main.js"></script>  
    </div>  
    </body>  
    </html> 


    其中js文件中的代码如下:

    function mousePos(e)  
    	{//获取鼠标所在位置的坐标,相对于整个页面  
    	  var x,y;   
    	  var e = e||window.event;   
    	  return {   
    	    x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,   
    	    y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop   
    	  };   
    	}  
    	
    	function getStyles(obj){//兼容FF,IE10; IE9及以下未测试
    		return document.defaultView.getComputedStyle(obj);
    	} 
    	function getCanvasPos(canvas,e)  
    	{//获取鼠标在canvas上的坐标  
    	    var rect = canvas.getBoundingClientRect(); 
    	    var leftB = parseInt(getStyles(canvas).borderLeftWidth);//获取的是样式,需要转换为数值
    	    var topB = parseInt(getStyles(canvas).borderTopWidth);
    	    return {   
    	     x: (e.clientX - rect.left) - leftB,  
    	     y: (e.clientY - rect.top) - topB 
    	   };  
    	}  
    	function draw(e)  
    	{  
    	    var c=document.getElementById("myCanvas");  
    	    var cxt=c.getContext("2d");  
    	    cxt.clearRect(0,0,c.width,c.height);  
    	    cxt.fillStyle="#FF0000";  
    	    cxt.beginPath();  
    	    //cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);  
    	    cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);  
    	    cxt.closePath();  
    	    cxt.fill();  
    	}


    其中,在获取cavas边框的时候,有以下3种方法:

    方法1: canvas.style.borderWidth

    该方法只能适用于写在html行内的样式;

    方法2: document.defaultView.getComputedStyle(obj)

    该方法适用于FF,以及IE10

    方法3: obj.currentStyle

    适用于IE


    展开全文
  • 像素法像素检测法思路是,将canvas多个图形(如果有多个话)分别离屏绘制,并用getImageData()方法分别获取到像素数据保存起来。当canvas元素监听到点击事件时,通过点击坐标可以直接推算出点击发生在canvas上...

    约定

    本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件,对于形状规则或者位置有规律的场景,肯定有更简便的实现,这里不做讨论。

    像素法

    像素检测法的思路是,将canvas中的多个图形(如果有多个的话)分别离屏绘制,并用getImageData()方法分别获取到像素数据保存起来。当canvas元素监听到点击事件时,通过点击坐标可以直接推算出点击发生在canvas上的第几个像素,然后遍历前面保存的图形数据,看看这个像素的alpha值是不是0,如果是0说明落点不在当前图形内,否则就说明点到了这个图形。

    根据点击坐标得到所点击的像素序号的方法:

    像素序号 = (纵坐标-1) * canvas宽度 + 横坐标

    比如在宽度为 5 的画布上点击坐标(3,3),根据上述公式得到像素序号是(3-1) * 5 + 3 = 18,如图所示:

    因为canvas导出的图形数据是将每个像素以rgba的顺序存成4个数字组成的数组,所以想访问指定像素的alpha值,只要读取这个数组的第pIndex * 4 + 3个值就可以了,如果这个值不为0,说明该像素可见,也就是点击到了该图形。

    这个方法是我认为思路最直接、结果最准确、而且对图形形状没有任何要求的方法,但这个方法有一个致命的局限,当图形需要在画布上移动时,要频繁的创建数据缓存才能保证检测结果准确,受到画布尺寸和图形数量的影响,getImageData()方法的性能会成为严重的瓶颈。所以如果canvas图形是静态的,这个方法非常适合,否则就不适合用这个方法了。

    角度法

    角度判断法的原理很容易理解,如果一个点在多边形内部,则该点与多边形所有顶点两两构成的夹角,相加应该刚好等于360°

    计算过程可以转变为以下三个步骤:

    1. 已知多边形顶点和已知坐标,将坐标与顶点两两组合成三点队列

    2. 已知三点求夹角,可以使用余玄定理

    3. 判断夹角之和是否360°

    每一步都很简单,实现如下:

    //计算两点距离

    const getDistence = function (p1, p2) {

    return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))

    };

    //角度法判断点在多边形内部

    const checkPointInPolyline = (point, polylinePoints) => {

    let totalA = 0;

    const A = point;

    for (let i = 0; i < polylinePoints.length; i++) {

    let B, C;

    if (i === polylinePoints.length - 1) {

    B = {

    x: polylinePoints[i][0],

    y: polylinePoints[i][1]

    };

    C = {

    x: polylinePoints[0][0],

    y: polylinePoints[0][1]

    };

    } else {

    B = {

    x: polylinePoints[i][0],

    y: polylinePoints[i][1]

    };

    C = {

    x: polylinePoints[i + 1][0],

    y: polylinePoints[i + 1][1]

    };

    }

    //计算角度

    const angleA = Math.acos((Math.pow(getDistence(A, C), 2) + Math.pow(getDistence(A, B), 2) - Math.pow(getDistence(B, C), 2)) / (2 * getDistence(A, C) * getDistence(A, B)))

    totalA += angleA

    }

    //判断角度之和

    return totalA === 2 * Math.PI

    }

    这个方法有一个局限性,就是图形必须是凸多边形。如果不是凸多边形需要先切割成凸多边形再计算,这就比较复杂了。

    类似的思路还有面积法,如果一个点在多边形内部,那么该点与多边形所有顶点两两构成的三角形,面积相加应该等于多边形的面积,首先计算多边形的面积就很麻烦,所以这种方法可以直接pass掉。

    东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com

    射线法

    射线法是一个我讲不清道理但非常好用的方法,只要判断点与多边形一侧的交点个数为奇数,则点在多边形内部。需要注意的是,只要数任何一侧的焦点个数就可以,比如左侧。这个方法不限制多边形的类型,凸多边形、凹多边形甚至环形都可以。

    实现起来也非常简单:

    const checkPointInPolyline = (point, polylinePoints) => {

    //射线法

    let leftSide = 0;

    const A = point;

    for (let i = 0; i < polylinePoints.length; i++) {

    let B, C;

    if (i === polylinePoints.length - 1) {

    B = {

    x: polylinePoints[i][0],

    y: polylinePoints[i][1]

    };

    C = {

    x: polylinePoints[0][0],

    y: polylinePoints[0][1]

    };

    } else {

    B = {

    x: polylinePoints[i][0],

    y: polylinePoints[i][1]

    };

    C = {

    x: polylinePoints[i + 1][0],

    y: polylinePoints[i + 1][1]

    };

    }

    //判断左侧相交

    let sortByY = [B.y, C.y].sort((a,b) => a-b)

    if (sortByY[0] < A.y && sortByY[1] > A.y){

    if(B.x

    leftSide++

    }

    }

    }

    return leftSide % 2 === 1

    }

    射线法有一种特殊情况,当点在多变形的一条边上时需要特殊处理。但在工程中我认为也可以不处理,因为如果用户刚好点在图形的边界上,那么程序认为他没有点到也讲的过去。

    展开全文
  • 我做是在TRTC electron里面,有一个屏幕分享功能,就只分享一个canvas画板出去,这就需要拿到整个屏幕中这个画板起始坐标和宽高,从而获取到这个画板,如下图 坐标(x,y)就是这个画板在整个窗口起始位置,...

    我做的是在TRTC electron里面,有一个屏幕分享的功能,就只分享一个canvas画板出去,这就需要拿到整个屏幕中这个画板的起始坐标和宽高,从而获取到这个画板,如下图

    在这里插入图片描述
    坐标(x,y)就是这个画板在整个窗口的起始位置,然后知道画板的宽和高,就能拿到这个画板了,详情可参考canvas里的rect()方法,rect()详解

    rect(x,y,w,h) :x,y就是起始坐标,w,h就是宽和高。
    并且rect()可以动态设置坐标参数。

    如果你也恰巧是要用TRTC electron,他的selectScreenCaptureTarget()方法中 屏幕分享的过程中 共享指定区域 rect() 规定的四个坐标是如下图
    在这里插入图片描述
    其中left和top坐标就相当于我之前说的坐标(x,y),相对于整个窗口的起始坐标,然后该元素的宽是用right坐标减去left坐标,高是用bottom坐标减去top坐标的。

    所以关键就是怎么拿到坐标(x,y),这就可以用到几个方法:

    1、比较蠢得是:拿截图软件截图的时候,上面会有尺寸,这个可以用做粗略的计算。
    2、在js中,通过document.getElementById(‘div’).offsetLeft,可以计算计算页面元素的offset,距离上面的高度就是offsetTop。

    offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。

    3、还有一个最简单和无bug的方法:getBoundingClientRect
    它用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

    使用方法:

    rectObject = object.getBoundingClientRect();
    rectObject.top:元素上边到视窗上边的距离;
    
    展开全文
  • 转载自:https://jingyan.baidu.com/article/c1a3101e5a32b3de656debbd.html <!doctype html> <html> <head> <meta charset="utf-8">...获取鼠标在Canvas的坐标位置</title...

    转载自:https://jingyan.baidu.com/article/c1a3101e5a32b3de656debbd.html

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>获取鼠标在Canvas中的坐标位置</title>
        <style>
        body{text-align: center;}
        #canvas {
            border: 1px solid #ccc;
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin: 0 auto;
        }
        </style>
    </head>
    <body>
        <div id="tips"></div>
        <div id="canvas" onmousemove="get_canvas(event,this)" onclick="test(event);"></div>
    </body>
    </html>
    <script>
    function get_canvas(ev, obj) {
    
        m_clientX = ev.clientX - obj.offsetLeft;
    
        m_clientY = ev.clientY - obj.offsetTop;
    
        // clientX/Y 鼠标相对当前页面body可视区域左上角的坐标
        // offsetLeft/Top 元素左上角相对父元素左上角的距离
    
        document.getElementById("tips").innerHTML = "当前坐标:X:" + m_clientX + " ,Y:" + m_clientY;
    }
    </script>

     

    转载于:https://www.cnblogs.com/nb08611033/p/10749385.html

    展开全文
  • 代码如下: <!doctype html> <html> <head>  <meta charset="utf-8">...获取鼠标在Canvas的坐标位置</title>  <style>  #canvas{  border:1px solid #ccc; ...
  • 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素。 XAML <Canvas ...> oneOrMoreUIElements </Canvas> -or- <Canvas .../> ...
  • web前端 在图片上标点 获取坐标 Vue 最近在开发过程中有一个需求: 要在一个不规则的物体图片上画标点,获取...根据canvas的宽高比映射成为像素坐标 用到两个位置数据(官方文档):MouseEvent.clientX,MouseEvent...
  • Canvas 获取颜色值

    2016-10-15 20:19:00
    Canvas 是 HTML5 画布元素,按照像素绘制图像。有时需要用户点击鼠标时候获取像素值。 获取画布元素 var canvas = document....在获取指定坐标的像素值 假设坐标为 mouseX 和 mouseY,则 ...
  • 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,...
  • PC是通过鼠标点击和移动,相对比较简单,比如onmousedown、onmouseup、onmousemove、onmouseout鼠标按键按下、按键起来、鼠标在元素上移动、鼠标从元素上离开。 canvas.onmousedown = function(e) { console....
  • canvas

    2021-01-13 16:17:25
    1 介绍 ...它标准属性有width和height,例如(class, id这些都属于标准...canvas是用于显示图形,自带了一个坐标系,默认与元素的定位坐标是一致位于左上角,是一个倒置数学坐标系(与浏览器一样) 2 canvas API
  • canvas入门

    2019-07-26 20:08:17
    规定元素的 id、宽度和高度: <canvas id="myCanvas" width="200" height="100"></canvas> Canvas坐标系 通过JavaScript来绘制 /*获取元素*/ var myCanvas = document...
  • 画布Canvas的使用方法

    2017-06-30 22:17:00
     Canvas他是使用 JavaScript 来绘制图像canvas 元素本身是没有绘图能力。所有绘制工作必须在 JavaScript 内部完成。  在画布流程中大致是这样:  1、’先获取画布canvas;  2、创建2d画布;  3、...
  • HTML5                此处显示内容    您浏览器不支持canvas 元素    您浏览器不支持canvas 元素            //先找到canvas这个画布
  • canvas画布01

    2017-04-13 21:39:49
     canvas是H5提供新标签,其最强大作用是进行2D图形绘制,canvas标签仅仅作为绘制图形载体,它本身并不具备绘制图形能力,我们是通过canvas元素的自身一个对象进行绘制图形。目前提供也有3D功能,...
  • HTML5之Canvas

    2014-09-20 10:14:00
    感性认识 ...获取canvas的context; 通过context的api用JavaScript来进行绘画; 绘制路径(矩形不需要),设置样式,使用stroke或fill来填充; 首先我们了解canvas的坐标是这样的 先来看...
  • 第一步,我们得获取canvas元素,并且得到其渲染上下文,然后利用context.一些列API来绘制我们图案 坐标系 画图第一步,知道画在那里,因此canvas有其坐标系,往右其x坐标增加,往下(对,往下,这个有点反常识,...
  • 在cocoscreator中,实时获取一骨骼动画中某一位置的坐标。 结构 canvas - star(我自己的元素) - boy(骨骼元素)-body身体 - head头 - arm 胳膊 -hand 手 - leg ...
  • 首先需要canvas这个标签,在js中获取这个canvas,这是一个简单’画布’,我们需要一个’画笔’ 使用canvas这个dom元素的getContext(‘2d’)这个方法,生成一个’画笔’ ...获取canvas对象 获取ctx画笔
  • canvas实现刮刮卡效果

    2020-03-18 21:46:01
    刮刮卡效果: 这里首先在加载图片作为...要获取鼠标的坐标,画布的坐标以及相对整个页面的坐标的- 牢记canvas使用基本套路 注意stroke fill 区别 使用save和restore控制样式容器 使用beginPath清空整个路径...
  • canvas元素的原点在左上角,坐标为(0,0) 2. canvas元素的方法 getContext(‘2d’):获取2D绘图上下文,可以通过调用该对象方法属性画各种图形 toDataURL(‘image/png’):导出在canvas元素上绘制
  • 获取canvas的绘制环境getContext()。 3.进行绘制画笔的粗细和颜色定义,分别是lineWidth和strokeStyle。 4.告诉系统开始绘制beginPath(),进行绘制坐标重置。 5.使用strokeRect()进行举行路径绘制(并不会填充...
  • 自定义右键菜单 gojs自带右键菜单,个人觉得样式不好调,导致一些要求达不到,不易对右键菜单随意调整,仔细想了一下,其实他右键菜单可以换成html元素即可以获取。思路话,就是写一个右键菜单,然后相对...
  • 获取canvas的绘制环境getContext()。 3.进行绘制画笔的粗细和颜色定义,分别是lineWidth和strokeStyle。 4.告诉系统开始绘制beginPath(),进行绘制坐标重置。 5.使用arc()和stroke()进行路径的绘制。如果不是...
  • canvas绘画常用方法

    2016-01-17 15:46:00
    canvas的坐标原点(0,0)是左上角。 其次设置颜色方面,通常有四种方法:16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者,rgb的三个参数是红绿蓝0-255的值,rgba在此基础上添加了第四个参数透明度,范围0-1...
  • Canvas元素是H5新特性之一, 可以通过脚本渲染图像 以下摘自W3school: ... 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须...获取canvas的工具集 定位开始点 浏览器坐标系跟我们高中坐标系学的相反, 屏幕
  • canvas刮刮卡游戏开发

    2019-11-27 15:36:57
    获取画布元素的上下文环境对象 使用上下文环境对象绘制图形,保存在内存中 绘制一个线条 //设置画布起始点 context.moveTo(x,y); //从当前位置绘制直线到x,y坐标 context.lineTo(x,y); 案例和效果: 2. 绘制...
  • selenium的基本定位方式只能定位到该画布上,画布上的子元素通过selenium的基础定位方式是定位不到的, 此时就需要使用selenium的js注入的方式,通过插入js脚本的方式获取索要操作的元素坐标。 再使用action对应的...

空空如也

空空如也

1 2 3 4 5
收藏数 92
精华内容 36
关键字:

获取canvas的元素坐标