圆点自动跟随鼠标移动

思路:在画布上绘制一个圆点,在移动鼠标时用背景图覆盖上一次的图片,然后再在这张背景图上绘制一个原点,利用定时器每隔10ms进行一次刷新<!doctype html><html><head>    <title>test</title>    <meta charset="UTF-8"></head><body><canvas id="canvas" Style="background: green; border:solid black thin" width="600px" height="500px"></canvas><!--画布--><script>    var canvas = document.getElementById("canvas");    var context = canvas.getContext(‘2d‘);    var img = new Image();//新建一个图片,用来覆盖上一次鼠标移动产生的图片    img.src = "greenCanvas.png";    var x=100,y=100;    setInterval(function () {//设置定时器        context.drawImage(img, 0, 0);//绘制背景图        context.beginPath();        context.arc(x, y, 10, 0, Math.PI * 2, false);        context.fill();//绘制圆点    }, 10);

canvas.onmousemove = function (event) {//获得鼠标的位置        x = event.offsetX;        y = event.offsetY;    };</script></body></html>效果图:

注:次数这个点是跟着鼠标进行移动的,由于只能上传图片而不能上传视频,所以就只能有这个效果图了



原文地址:https://www.cnblogs.com/MrZWJ/p/10046931.html

时间: 11-29

圆点自动跟随鼠标移动的相关文章

win10 指针焦点自动跟随鼠标

Linux或者ubuntu系统中有个Focus-follows-mouse功能:鼠标指哪,键盘的焦点就指向哪,甚至可以让鼠标所在的窗口实时处于最顶层,达到真正的焦点跟随鼠标.通俗的讲就是,如果在多窗口的状态下,如果我们要对其中一个窗口进行一些操作,必须点击一下那个窗口(目的是让该窗口获取焦点),而focus-follow-mouse 功能让你只需要将鼠标指针移动到该窗口上面就可以对该窗口进行操作,不需要再点击一下.看似一个很简单的功能,确极为方便(尤其是对题主这种不喜欢在触控板上做点击操作的人)

虚拟摇杆跟随鼠标

EasyTouch的joystick跟随鼠标 1 using UnityEngine; 2 using System.Collections; 3 4 public class JoystickPosControll : MonoBehaviour 5 { 6 7 public EasyJoystick m_EasyJoystick; 8 9 public Vector2 offset; 10 11 public Camera m_Camera; 12 13 public Vector2 bil

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

C# 系统应用之鼠标模拟技术及自动操作鼠标

游戏程序的操作不外乎两种--键盘输入控制和鼠标输入控制,几乎所有游戏中都使用鼠标来改变角色的位置和方向,本文主要是讲述如何使用C#调用Windows API函数实现鼠标模拟操作的功能.首先通过结合FindWindow和FindWindowEx寻找到窗体的按钮,在通过SetCursorPos或mouse_event函数操作鼠标,同时涉及到通过spy++工具获取窗体消息的信息. 一. Windows API函数介绍 .NET没有提供改变鼠标指针位置.模拟单机操作的函数,但是可以通过调用Windows

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

一.获取鼠标坐标 clientX:鼠标到可视区边缘的距离:    scrollLeft:滚动条到页面顶端的距离(不可视区的距离) 兼容性写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 跟随鼠标移动的divs,

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

IOS 自定义控件 跟随鼠标的圆点

1 #import <UIKit/UIKit.h> 2 3 @interface FKCustomView : UIView 4 5 @end 6 7 CustomView.m 8 #import "FKCustomView.h" 9 10 @implementation FKCustomView 11 12 //定义两个变量几率当前触碰点的坐标 13 int curX; 14 int curY; 15 -(void) touchesMoved:(NSSet<UITo