<div style="width:200px; height:20px; position:fixed; top:0; left:0; background-color:blue;">
<span id="x"></span>-
<span id="y"></span>-
<span id="v"></span>-
<span id="w"></span>
</div>
<script>
$('html').mousemove(function(){
$("#x").text(event.pageX);
$("#y").text(event.pageY);
$("#v").text(event.clientX);
$("#w").text(event.clientY);
})
$('html').click(function(){
var wdWidth = document.body.scrollWidth;
var wdHeight = document.body.scrollHeight;
var x = event.pageX;
var y = event.pageY;
//alert(x + ' ' + y + ' ' + wdWidth + ' ' + wdHeight);
draw(x,y);
})
</script> <canvas id="yuanxing" width="1300px" height="1300px" style="position:absolute;top:0;left:0;"> </canvas>
<script type=text/javascript>
function draw(x,y,r){
var r = arguments[3] || 20;
var canvas=document.getElementById("yuanxing");
var context=canvas.getContext("2d");
context.fillStyle="blue";
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,true); //Math.PI*2是JS计算方法,是圆
context.closePath();
context.fill();
}
</script>

  

jquery canvas 用户点击记录的更多相关文章

  1. js记录用户行为浏览记录和停留时间(转)

    演示地址:http://weber.pub/demo/160902/test.html 测试源码下载:http://pan.baidu.com/s/1nvPKbSP 密码:r147 解决问题所使用的知 ...

  2. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  3. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  4. 用户点击确认登录,自动跳转下面地址得到code

    PHP获取微信openid 简单教程 WEB   2014年10月29日  10868浏览  6评论 获取code https://open.weixin.qq.com/connect/oauth2/ ...

  5. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  6. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  7. 通过统计用户DNS解析记录,实现监控用户上网行为

    上次通过扫描抓包分析TTL的方式检测公司网络开放的端口,发现没有开放53端口(DNS),也就是在公司内部的主机只能用服务器自动分配的DNS,并且发现这是台内部服务器.今天发现bing上不去,检测后发现 ...

  8. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  9. C#-WinForm-弹窗提示框-如何知道用户点击的是哪个按钮?

    MessageBox.Show() 有21个重载 常用的弹窗提示框 1.一个参数,弹窗只有一个选项 2.三个参数,第一个参数是设置弹窗消息框中的文字内容:第二个参数是设置弹窗标题栏中显示的文本:第三个 ...

随机推荐

  1. [POI2008]BLO-Blockade

    https://www.luogu.org/problem/show?pid=3469 题目描述 There are exactly  towns in Byteotia. Some towns ar ...

  2. iOS 隐藏导航栏下的黑线

    一.找到导航栏下的黑线 // 寻找导航栏下的黑线 - (UIImageView *)findHairlineImageViewUnder:(UIView *)view { if ([view isKi ...

  3. [Unity]游戏Inside中的Chromatic Aberration效果学习

    Chromatic Aberration效果指的是模拟摄像机的拍摄瑕疵导致rgb三个通道的颜色发生了偏移,如 传统的Chromatic Aberration实现往往是基于一个后处理,将rgb采样的坐标 ...

  4. 15、简述MySQL的执行计划?

    具体的Mysql的执行计划,请参考下面的链接: MySQL_执行计划详细说明

  5. bzoj 1261 区间DP

    首先我们知道ans=Σ(h[i]*f[i])=Σ(h[i]*d[i])/s=Σ(k(r[i]+1)+c)*d[i]/s=Σ(k*r[i]+(k+c))*d[i]/s 我们可以发现,除了k*r[i]之外 ...

  6. 空间数据库系列二:空间索引S2与Z3分析对比

    S2与Z3对比分析 1. S2 2. Geohash 3. Geomesa Z3 4. S2对比geohash 4.1. geohash存在的问题 4.2. S2优势 4.3. 实际对比例子 5. 测 ...

  7. LINUX内核面试题摘选

    转载:http://blog.csdn.net/zm1_1zm/article/details/77231197 1) Linux中主要有哪几种内核锁? 答:Linux的同步机制从2.0到2.6以来不 ...

  8. 使用GDB命令行调试器调试C/C++程序【转】

    转自:https://linux.cn/article-4302-1.html 编译自:http://xmodulo.com/gdb-command-line-debugger.html作者: Adr ...

  9. [device tree] interrupt mapping example

    This is for Devicetree Specification Release 0.1 Interrupt Mapping Example p19 在講解前,先帶進一些 PCI 的基礎觀念 ...

  10. 在LINUX平台上手动创建多个实例(oracle11g)

    在LINUX平台上手动创建多个实例(oracle11g) http://blog.csdn.net/sunchenglu7/article/details/39676659 ORACLE linux ...