有了前面的canvas基础之后，现在开始就精彩了，后面写的canvas教程都是属于综合应用，前面已经写了常用的canvas基础知识,参考链接如下：

[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

[js高手之路] html5新增的定时器requestAnimationFrame实战进度条

本文来做一个简单的实时获取鼠标坐标的功能，在canvas动画开发中，获取鼠标的坐标，键盘的按键等等，都是常用的操作，我们就慢慢得把他们封装成一个公共库。

一、事件的兼容：

 function bindEvent(obj, event, fn) {

         if (obj.attachEvent) { //ie

             obj.attachEvent('on' + event, function () {

                 fn.call(obj);

             });

         } else {

             //chrome&ff

             obj.addEventListener(event, fn, false);

         }

     }

上面兼容ie8以及修正this关键字在ie低版本的指向，下面兼容chrome和ff。其他更常用的封装可以参考我的javascript开源框架gdom

二、用立即表达式搭建一个基本的库

添加获取鼠标坐标的方法

 ;(function (window) {

     window.G = {};

     function bindEvent(obj, event, fn) {

         if (obj.attachEvent) { //ie

             obj.attachEvent('on' + event, function () {

                 fn.call(obj);

             });

         } else {

             //chrome&ff

             obj.addEventListener(event, fn, false);

         }

     }

     G.getPos = function( dom ){

         var oPos = { x : 0, y : 0 };

         bindEvent( dom, 'mousemove', function( ev ){

             var oEvent = ev || event, x, y;

             if ( oEvent.pageX || oEvent.pageY ){

                 x = oEvent.pageX;

                 y = oEvent.pageY;

             }else {

                 x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;

                 y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;

             }

             x -= dom.offsetLeft;

             y -= dom.offsetTop;

             oPos.x = x;

             oPos.y = y;

         } );

         return oPos;

     };

 })(window);

三、引入封装的js库，绑定canvas为监听对象，打印当前鼠标的坐标

鼠标的坐标，我这里画了2根线，便于观察.

 <head>

 <meta charset='utf-8' />

 <script>

 ;(function (window) {

     window.G = {};

     function bindEvent(obj, event, fn) {

         if (obj.attachEvent) { //ie

             obj.attachEvent('on' + event, function () {

                 fn.call(obj);

             });

         } else {

             //chrome&ff

             obj.addEventListener(event, fn, false);

         }

     }

     G.getPos = function( dom ){

         var oPos = { x : 0, y : 0 };

         bindEvent( dom, 'mousemove', function( ev ){

             var oEvent = ev || event, x, y;

             if ( oEvent.pageX || oEvent.pageY ){

                 x = oEvent.pageX;

                 y = oEvent.pageY;

             }else {

                 x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;

                 y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;

             }

             x -= dom.offsetLeft;

             y -= dom.offsetTop;

             oPos.x = x;

             oPos.y = y;

         } );

         return oPos;

     };

 })(window);

 </script>

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height,

         oInfo = document.querySelector( "#info" ),

         oPos = G.getPos( oCanvas );

         oCanvas.addEventListener( "mousemove", function(){

             oGc.clearRect( 0, 0, width, height );

             oGc.beginPath();

             oGc.moveTo( oPos.x, 0 );

             oGc.lineTo( oPos.x, height );

             oGc.moveTo( 0, oPos.y );

             oGc.lineTo( width, oPos.y );

             oGc.closePath();

             oGc.strokeStyle = '#09f';

             oGc.stroke();

             oInfo.innerHTML = '鼠标的当前坐标是:(' + oPos.x + ',' + oPos.y + ')';

         }, false );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="500" height="400"></canvas>

 <div id="info"></div>

 </body>

四、点击'run code'可以预览效果额

<head>
<meta charset='utf-8' />
<script>
;(function (window) {
window.G = {};
function bindEvent(obj, event, fn) {
if (obj.attachEvent) { //ie
obj.attachEvent('on' + event, function () {
fn.call(obj);
});
} else {
//chrome&ff
obj.addEventListener(event, fn, false);
}
}

G.getPos = function( dom ){
var oPos = { x : 0, y : 0 };
bindEvent( dom, 'mousemove', function( ev ){
var oEvent = ev || event, x, y;
if ( oEvent.pageX || oEvent.pageY ){
x = oEvent.pageX;
y = oEvent.pageY;
}else {
x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;
}
x -= dom.offsetLeft;
y -= dom.offsetTop;
oPos.x = x;
oPos.y = y;
} );
return oPos;
};

})(window);
</script>
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height,
oInfo = document.querySelector( "#info" ),
oPos = G.getPos( oCanvas );
oCanvas.addEventListener( "mousemove", function(){

oGc.clearRect( 0, 0, width, height );
oGc.beginPath();
oGc.moveTo( oPos.x, 0 );
oGc.lineTo( oPos.x, height );
oGc.moveTo( 0, oPos.y );
oGc.lineTo( width, oPos.y );
oGc.closePath();
oGc.strokeStyle = '#09f';
oGc.stroke();

oInfo.innerHTML = '鼠标的当前坐标是:(' + oPos.x + ',' + oPos.y + ')';
}, false );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<div id="info"></div>
</body>
run code

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标的更多相关文章

  1. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  2. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  3. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  4. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  5. [js高手之路] html5 canvas动画教程 - 匀速运动

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  6. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  7. [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

    上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

随机推荐

  1. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  2. [2014-09-21]如何在 Asp.net Mvc 开发过程中更好的使用Enum

    场景描述 在web开发过程中,有时候需要根据Enum类型生成下拉菜单: 有时候在输出枚举类型的时候,又希望输出对应的更具描述性的字符串. 喜欢直接用中文的请无视本文 不多说,直接看代码. 以下代码借鉴 ...

  3. ABP 框架学习-01篇

    从来没有自己写过太多的技术性文章,博客里面的文章都是拷贝别人的东西,做一个笔记功能给自己用的.最近觉得应该写点自己的学习博客 https://aspnetboilerplate.com/ ABP框架, ...

  4. 百行go代码构建p2p聊天室

    百行go代码构建p2p聊天室 百行go代码构建p2p聊天室 1. 上手使用 2. whisper 原理 3. 源码解读 3.1 参数说明 3.1 连接主节点 3.2 我的标识 3.2 配置我的节点 3 ...

  5. 总结各种排序算法【Java实现】

    一.插入类排序 1.直接插入排序 思想:将第i个插入到前i-1个中的适当位置 时间复杂度:T(n) = O(n²). 空间复杂度:S(n) = O(1). 稳定性:稳定排序. 如果碰见一个和插入元素相 ...

  6. 【C#多线程编程实战笔记】一、 线程基础

    创建线程 Thread :所执行的方法不能有参数. class Program { static void Main(string[] args) { Console.WriteLine(" ...

  7. 开源项目Druid的提取SQL模板

    在数据库审计中,常常用到SQL模板,这样提取一次模板,下一次就不用对相同的模板的SQL进行相关操作.对此Druid提供相应的工具类进行SQL模板提取: package com.dbappsecurit ...

  8. 在Centos7x上部署docker

    docker只支持CentOS7.x系统,所以近期根据docker官网指南自己搭建了一套,供大家参考. 1.部署Centos7.x系统,查看系统版本. 2.执行 sudo yum update 更新到 ...

  9. POJ 1236 tarjan

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19613   Accepted: 77 ...

  10. PHP初入，for循环使用

    一: 找出100-999之间的所有"水仙花数".所谓水仙花数是指一个三位 数,各位数字的立方和等于该数本身.(如153次方＝1的3次方+5的3次方+3的3次方)并输出这些数字 想想 ...