<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. Create MSSQL Procedure

    代码: CREATE PROCEDURE [dbo].[sp_UpdateCouponCount] AS GO

  2. [洛谷P1858] 多人背包

    洛谷题目链接:多人背包 题目描述 求01背包前k优解的价值和 输入输出格式 输入格式: 第一行三个数K.V.N 接下来每行两个数,表示体积和价值 输出格式: 前k优解的价值和 输入输出样例 输入样例# ...

  3. Ant复制文件

    <?xml version="1.0" encoding="UTF-8"?> <project name ="test" ...

  4. 在此位置打开CMD

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\folder\shell\cmd]@="在此位置打开CMD"[HKE ...

  5. 关于C++的宏:WIN32和DEBUG

    判断平台相关,判断程序是属于debug版本还是release版本,我们会这么做. #ifdef WIN32 #else #endif #ifdef DEBUG // 如果是调试版本 #else //发 ...

  6. Spring理论基础-控制反转和依赖注入

    第一次了解到控制反转(Inversion of Control)这个概念,是在学习Spring框架的时候.IOC和AOP作为Spring的两大特征,自然是要去好好学学的.而依赖注入(Dependenc ...

  7. Java面试通关要点汇总集(山东数漫江湖)

    这里,笔者结合自己过往的面试经验,整理了一些核心的知识清单,帮助读者更好地回顾与复习 Java 服务端核心技术.本文会以引出问题为主,后面有时间的话,笔者陆续会抽些重要的知识点进行详细的剖析与解答.敬 ...

  8. 表格td内容超出宽度显示... table-layout: fixed;

    td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...

  9. js_在原有的日期上添加天数输出添加后的日期

    开始编码工作也有段时间了,想想没有留下点什么,有点遗憾.学到的一些经验,写写,分享一下.也给自己整理一下. 今天分享一下,在原有的日期上添加天数输出添加后的日期.开始做的时候,简单的思路是,直接用ne ...

  10. 命令行创建KVM虚拟机

    qemu命令创建虚拟机: qemu-img create -f qcow2 /home/ubuntu.img 20G   qemu-system-x86_64 -m 2048 -enable-kvm ...