addeventlistener鼠标移过给定x和y值时速度较慢 - 腾讯云开发者社区

1.1 捕获物体 1.1.1 矩形的捕获可以通过获取鼠标点击时的坐标来判断是否捕获了矩形。...，如果落在，就添加两个事件（mousemove和mouseup）； 2）移动物体：在鼠标移动（mousemove）中，更新物体坐标为鼠标坐标； 3）松开物体：在鼠标松开（mouseup）时，移除mouseup...以小球来说，我们用oldX和oldY分别表示小球旧的位置坐标，新的位置坐标是ball.x和ball.y，可以得到： vx = ball.x - oldX; vy = ball.y - oldY; 示例：...语法： //targetX、targetY：表示目标的横坐标和纵坐标 //easing：表示缓动系数 //vx、vy：表示物体在x轴方向和y轴方向上的速度 let targetX = 任意位置; let...不管缓动动画应用于哪些方面，其实现思路是一样的，主要是以下两个步骤： 1）当前速度 = （最终值 - 当前值）* 缓动系数； 2）新的值 = 当前值 + 当前速度。

9903 0

利用canvas实现毛笔字帖（二）

当鼠标移动(mousemove)时，我们认为是毛笔在移动。当鼠标放开(mouseup)时，我们认为是毛笔收起了。当鼠标移出canvas范围时，我们认为毛笔移出字帖的范围了，也认为是收笔了。 1....var write = { //··· lastX: 0,//画笔上次停留坐标x轴值 lastY: 0,//画笔上次停留坐标y轴值 //··· //辅助函数区...getLineWidth: function (s, t) { var v = s/t; var resultLineWidth = 0; if(v 速度到达某个最小值时...} else if(v >8){//速度到达某个最大值时，笔画很小 resultLineWidth = this.lineWidthMin; }...else{ // 根据速度赋予线条宽度值，速度比例和笔画宽度比例的计算 resultLineWidth = this.lineWidthMax - (v-0.1)

3.5K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

「JavaScript 」动画基础 - 01

= 'x坐标是' + x + ' y坐标是' + y; }) 1.1.4 案例：模态框拖拽弹出框，我们也称为模态框。...触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了鼠标按下触发的事件源是最上面一行...left和top值 document.addEventListener('mousemove', move) function move(e) { // 注意单位‘px...案例分析: 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。之后把数值给遮挡层做为left 和top值。...，激发响应事件 imgBox.addEventListener('mousemove', function() { // x，y为鼠标在大盒子中的相对坐标位置 var

5091 0

JavaScript

属性操作(可自定义属性) setAttribute()：设置DOM的属性值 getAttribute()：得到DOM的属性值 removeAttribute()移除属性事件操作 ---- 事件高级...document.addEventListener('click', function(e) { // 1. client 鼠标在可视区的x和y坐标...x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('--...-------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX);...load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等 // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比

1.2K7 0

Canvas系列（15）：实战-小球拖拽

接下来就是需要获取鼠标的x和y坐标了，这里就监听mousemove事件来获取。...; return true; } }) }, false); 我们定义了一个captureMouse的方法，它返回一个对象mouse，只要在任何地方使用mouse.x和mouse.y...canvas.removeEventListener('mouseup', onMouseUp, false); } }, false); 现在还有一个问题，就是当小球拖拽的时候，不应该再受到重力和自己的速度运动了...，所以需要修改animate函数，只有当选中的小球和当前遍历的小球不相等的时候才去更新新的坐标，否则就用鼠标的坐标（上述代码也实现）： function animate (){ requestAnimationFrame...投掷我们刚才拖拽完了以后，由于速度设为了0，所以小球是做自由落体运动，而大多数情况下，我们更希望可以把小球投掷出去，那么当小球投掷的时候，需要计算小球的瞬时速度，这时我们就需要定义拖拽时上一次小球的坐标

9113 2

FlashFlex学习笔记(38)：缓动动画

，速度跟距离成反比关系，用公式描述为 V = k S (0时，逐渐慢下来，直到准确停在指定位置...* easing; //x轴速度与距离成正比缩小 var vy:Number = (targetY - ball.y) * easing; //y轴速度与距离成正比缩小 ball.x...这样的话，假设物体要移动到 100的x坐标位置，当前已经到了99.95，根据比例因子0.5的设置，下一次应该移动 (100 - 99.95)/2 = 0.025，这个值已经超出了Flash的处理能力，系统会把...，合理的做法是达到一定的精度值时，就可以认为已经移动完成，从而做出相应的处理....，这样出发时，其实就很接近下面要演示的缓动鼠标跟随代码： package { import flash.display.Sprite; import flash.events.MouseEvent

5895 0

FlashFlex学习笔记(39)：弹性运动

，但加速度越来越小，等经过目标点时，发现速度太大刹不住车(此时速度达到最大值，但加速度减为0)，奔过头了！...于是加速度发生逆转，从0开始变为负值，从而导致速度越来越小，等速度减到0时，也奔到了最右侧(此时负加速度也达到最大值)，然后在负加速度的影响下，开始掉头又狂奔....这样不断下去，直接摩擦力让它筋疲力尽...ball.x+=vx; } } } 上面演示是一维的弹性运动，当然也可以同时在x轴和y轴上进行代码： package { import flash.display.Sprite; import...，而第二个示例可以看作是x,y二个方向加速度随位移影响的叠加，而第三个示例，则可以看作是任何方向这种影响再叠加重力的综合效果。...); handle.x=Math.random()*stage.stageWidth; handle.y=Math.random()*stage.stageHeight; handle.addEventListener

6365 0

如何利用HTML5 Canvas和JavaScript创建交互式和动画图形的指南

定义参数对象，包括点数量、宽度系数、鼠标灵敏度、弹性和摩擦力等。...y坐标、vx与vy速度为0。...鼠标移动事件和触摸事件。...ctx.beginPath(); touchTrail.forEach((p, pIdx) => { ... }); 在touchTrail数组中遍历每个点，当当前点为第一个点时，将点的坐标设置为鼠标的坐标...vx和vy表示在x方向和y方向上的速度。

1431 0

前端成神之路-WebAPIs05

= 'x坐标是' + x + ' y坐标是' + y; }) 1.1.4 案例：模态框拖拽弹出框，我们也称为模态框。 ...触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了鼠标按下触发的事件源是最上面一行...// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值 document.addEventListener('mousemove...案例分析: 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。之后把数值给遮挡层做为left 和top值。...// console.log(x, y); // (2) 减去盒子高度 300的一半是 150 就是我们mask 的最终 left 和top值了 // (3) 我们mask

1.5K1 0

FlashFlex学习笔记(24)：粒子效果

y轴的速度，其它没变原理：在舞台的某一区域放置大量小球实例，然后在某个时刻让其向四面八方运动即可(即改变每个小球在x,y轴上的坐标) 问题：效率！...让CPU在每帧对于大量对象进行重绘是很耗资源的，所以当小球跑出舞台边界时，得想办法通知CPU：这些小球不需要再处理了（反正也看不见）！....y=mouseY+15; } function MouseDownHandler(e:MouseEvent):void { //点击一次后，取消鼠标跟随，并移除lbl1，同时也取消鼠标点击事件(即本事件仅触发一次...原理：将所有粒子聚集于屏幕上某点(本例中为屏幕底部中心点)，然后赋给一个随机向上的速度（这样就能向上喷射出），同时为了更效果更自然，还要加入随机的x轴方向速度（以实现喷射过程中的扩散），最后再加入重力加速度...效率：为了能最大限度的利用现有对象，当粒子跑出舞台边界时，重新用代码将其定位到发射点，以便下次继续喷射。交互：本例中为增强交互性，用鼠标的x轴位置模拟了风力影响。

6645 0

FlashFlex学习笔记(31)：对象拖拽与投掷

frictionX; //加入摩擦力，所以最终会停下来 vy *= frictionY; ball.x+=vx;//产生移动 ball.y+=vy; var left:...而投掷则意味着：在鼠标松开小球的那一瞬间，小球也应该具备有一定的出口速度(即鼠标最终的移动速度)。...Flash中每一帧对应的时间基本上是相同的，可以认为这就是物理中的“单位时间”，根据刚才对投掷概念的理解，只要代码能得知在鼠标松开小球的最后一帧，小球在x,y轴方向的位移，即为小球的出口x,y轴速度....private function MouseDownHandler(event:MouseEvent):void { oldX = ball.x; oldY = ball.y;...跟踪每一帧小球的速度(坐标位置) private function TrackVelocity(event:Event):void { vx = ball.x-oldX; vy = ball.y-oldY

6739 0

canvas动画-跟着鼠标移到的小球原

小球可以跟着鼠标移到，点击小球时会按既定的坐标移到小球（不再跟着鼠标移到），鼠标移出canvas，此时动画停止，鼠标进入动画时动画开始 <canvas id="canvas" width="600"...+= ball.vx; ball.y += ball.vy; //加速度， ball.vy *= .99; ball.vy += .25; //边界检测，...running) { clear() ball.x = e.layerX; ball.y = e.layerY; //ball.x = e.clientX;...//ball.y = e.clientY; ball.draw() } }) canvas.addEventListener("click", function(e) {...running) { raf = window.requestAnimationFrame(draw); //作用是避免准备移出时，圆圈跟着鼠标运动 running

4863 0

FlashFlex学习笔记(18)：画线及三角函数的基本使用

，而非图形中心点为中心，所以在跟随鼠标旋转时，总感觉有些错位，没关系，只要调整一下Arrow.cs即可 package { import flash.display.Sprite; public...= 0.1; //y轴移动速度 const X_SPEED = 1; //x轴移动速度 const AMPLITUDE = 50.0; //最大振幅 const X_START = 0; //x轴的起始点...} 甚至还可以同时把正弦函数应用到多个属性： //参数常量 const Y_SPEED = 0.07; //y轴变化速度 const X_SPEED = 0.10; //x轴变化速度 const...= Y_START; graphics.moveTo(b.x,b.y); addEventListener(Event.ENTER_FRAME,EnterFrameHandler); function...b.y); } 如果把代码中的二行注释启用，即让x,y的变化速度改成随机，结果可能更有趣：

6496 0

as3 模拟“抛”的动作

以一个小球为示例，在鼠标点击的时修改它的加速度值(在短时间内移动的距离)，加速度以一个值加速，在遇到边界时进行反向。...代码参考自：《ActionScript 3.0 动画教程》，添加了拖动时的范围限定。...49: oldY = ball.y; 50: 51: stage.addEventListener(MouseEvent.MOUSE_UP...- oldX; 68: vy = ball.y - oldY; 69: 70: oldX = ball.x; 71:...{ 75: vx += gravity; 76: ball.x += vx; 77: ball.y += vy; 78:

3980 0

“AS3.0高级动画编程”学习：第二章转向行为(上)

Math.cos(value)*len; _y=Math.sin(value)*len; } //截断向量(设置向量模最大值) public function truncate...get x():Number { return _x; } //设置y轴坐标 public function set y(value:Number):void { _y=value...y坐标及朝向(即rotation)之前，累加了转向速度并考虑到了物体的惯性。..._fleer.flee(_seeker.position);//小偷躲警察 _seeker.update(); _fleer.update(); } } } 调整红色滑块和蓝色滑块...(注：代码中的SimpleSlider在Flash/Flex学习笔记(46)：正向运动学中能找到) 如果愿意，您还可以加入碰撞检测，比如当“警察”抓住“小偷”时，显示一个提示：“小样，我抓住你了！”

1.4K6 0

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

区别：mouseover和mouseout子元素也会触发，可以冒泡触发区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡阻止鼠标的默认事件 e.preventDefault...左键对应的值为 0、1、1 中键对应的值为 1、4、2 右键对应的值为 2、2、3 timeStamp 从页面打开开始到触发事件的时间以下内容为坐标值的说明： clientX和clientY与...x，y clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标...相对页面左上角的距离 screenX screenY screenX screenY 相对屏幕左上角的位置总结： clientX和clientY与x，y一样的，以浏览器显示区域的左上角开始...x,y是新浏览器支持 offsetX，offsetY，针对目标元素的左上角坐标，从padding开始。

3K2 0

基于发布-订阅的原生 JS 插件封装

一、需求分析封装一个插件，将小球的 DOM 对象作为参数传入，使得小球在鼠标按下和放开后能够运动，在水平方向做匀减速直线运动，初速度为鼠标移开瞬间的速度，在竖直方向的运动类似于自由落体运动。...二、梳理思路分析这样的一个过程，其中大致会经历一下的关键步骤： 1、鼠标按下时，记录小球的初始位置信息 2、鼠标按下后滑动，记录松开鼠标瞬间的移动速度 3、鼠标松开后，在水平方向上，让小球根据刚刚记录的移动速度进行匀减速运动...同样，对实现加速度的效果，首先弄清一个问题，什么是速度？速度就是单位时间内运动的距离，这里暂且把它当做 20ms 内的距离，那么我每次拍照时，将这个距离增加或减少一个值，这个值就是加速度。...//开辟一个容器let $plan = $.callBack();//往容器里面添加函数$plan.add(function(x, y){ console.log(x, y);})$plan.add...(function(x, y){ console.log(y, x);})$plan.fire(10, 20);//会输出10，20 20,10//$plan.remove(function)用来从容器中删除某个函数

3.1K2 0

手写原生代码专题 | 简易手写画板（二）

具体的思路如下：定义DOM对象变量：获取画布、增减线条粗细的按钮、颜色控件、显示线条粗细值、清除按钮然后定义一些变量值：初始化线条粗细的长度、鼠标是否按下的状态、线条颜色的默认值、颜色变量、鼠标的位置...x,y 变量然后我们定义画圆形、画直线的相关方法：drawCircle(x,y)、drawLine(x1,y1,x2,y2) 接着在画布上定义监听 mousedown 的方法，初始化鼠标位置的X,Y的值...，更改鼠标是否按下的状态值为true。...x,y值，先以线条的宽度绘制圆形，然后以鼠标按下时的 x,y 的值为直线的起点，鼠标移动时获取鼠标的 x,y 值为终点绘制直线。...绘制完成后更改x,y的值为当前鼠标的位置（不断更新直线的起点），这样就可以一直拖动鼠标绘制直线。

1.5K2 0

一篇文章带你了解SVG javascript脚本

通过脚本编写，可以修改SVG元素，为其设置动画或侦听形状上的鼠标事件。当SVG嵌入HTML页面中时，可以在JavaScript中使用SVG元素，可以使用JavaScript编写SVG脚本。...例： x="10" y="10" width="100" height="75" style="stroke: #000000...;" onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;" /> 此示例在鼠标悬停在矩形上时更改笔触颜色和笔触宽度...，并在鼠标离开矩形时重置笔触颜色和笔触宽度。...尝试将鼠标移到形状上，然后再次移出，以查看事件监听器的效果。 ? 还可以使用addEventListener() 函数将事件监听器附加到SVG元素。

2.8K2 0

常用鼠标事件

(e) { // 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log...(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标...而且不占位置，我们使用绝对定位即可 ④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的 top和left 值就可以移动图片实现代码鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片 var x = e.pageX;...var y = e.pageY; console.log('x坐标是' + x, 'y坐标是' + y); //3 .

3.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

HTML5 Canvas开发详解(7) -- 高级动画

利用canvas实现毛笔字帖（二）

「JavaScript 」动画基础 - 01

JavaScript

Canvas系列（15）：实战-小球拖拽

FlashFlex学习笔记(38)：缓动动画

FlashFlex学习笔记(39)：弹性运动

如何利用HTML5 Canvas和JavaScript创建交互式和动画图形的指南

前端成神之路-WebAPIs05

FlashFlex学习笔记(24)：粒子效果

FlashFlex学习笔记(31)：对象拖拽与投掷

canvas动画-跟着鼠标移到的小球原

FlashFlex学习笔记(18)：画线及三角函数的基本使用

as3 模拟“抛”的动作

“AS3.0高级动画编程”学习：第二章转向行为(上)

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

基于发布-订阅的原生 JS 插件封装

手写原生代码专题 | 简易手写画板（二）

一篇文章带你了解SVG javascript脚本

常用鼠标事件

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐