[js高手之路] html5 canvas动画教程 - 实时获取鼠标的

作者:分分快三计划

正文来做三个轻便易行的实时获取鼠标坐标的效用,在canvas动漫开垦中,获取鼠标的坐标,键盘的开关等等,都以常用的操作,我们就逐步得把她们封装成一个公共库。

足够收获鼠标坐标的诀要

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

上面宽容ie8以至修正this关键字在ie低版本的照准,上边宽容chrome和ff。别的更常用的包裹能够参见笔者的javascript开源框架gdom

<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>

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

[js高手之路] html5 canvas连串教程 - 领头路线beginPath与关闭路线closePath详细解释

风流浪漫、事件的十一分:

[js高手之路] html5新扩大的反应计时器requestAnimationFrame实战进度条

鼠标的坐标,作者这里画了2根线,便于观望.

 1 ;(function (window) {
 2     window.G = {};
 3     function bindEvent(obj, event, fn) {
 4         if (obj.attachEvent) { //ie
 5             obj.attachEvent('on'   event, function () {
 6                 fn.call(obj);
 7             });
 8         } else {
 9             //chrome&ff
10             obj.addEventListener(event, fn, false);
11         }
12     }
13 
14     G.getPos = function( dom ){
15         var oPos = { x : 0, y : 0 };
16         bindEvent( dom, 'mousemove', function( ev ){
17             var oEvent = ev || event, x, y;
18             if ( oEvent.pageX || oEvent.pageY ){
19                 x = oEvent.pageX;
20                 y = oEvent.pageY;
21             }else {
22                 x = oEvent.clientX   document.body.scrollLeft || document.documentElement.scrollLeft;
23                 y = oEvent.clientX   document.body.scrollTop || document.documentElement.scrollTop;
24             }
25             x -= dom.offsetLeft;
26             y -= dom.offsetTop;
27             oPos.x = x;
28             oPos.y = y;
29         } );
30         return oPos;
31     };
32 
33 })(window);

 

三、引进封装的js库,绑定canvas为监听指标,打字与印刷当前鼠标的坐标

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

二、用当下表明式搭建多少个宗旨的库

 1 <head>
 2 <meta charset='utf-8' />
 3 <script>
 4 ;(function (window) {
 5     window.G = {};
 6     function bindEvent(obj, event, fn) {
 7         if (obj.attachEvent) { //ie
 8             obj.attachEvent('on'   event, function () {
 9                 fn.call(obj);
10             });
11         } else {
12             //chrome&ff
13             obj.addEventListener(event, fn, false);
14         }
15     }
16 
17     G.getPos = function( dom ){
18         var oPos = { x : 0, y : 0 };
19         bindEvent( dom, 'mousemove', function( ev ){
20             var oEvent = ev || event, x, y;
21             if ( oEvent.pageX || oEvent.pageY ){
22                 x = oEvent.pageX;
23                 y = oEvent.pageY;
24             }else {
25                 x = oEvent.clientX   document.body.scrollLeft || document.documentElement.scrollLeft;
26                 y = oEvent.clientX   document.body.scrollTop || document.documentElement.scrollTop;
27             }
28             x -= dom.offsetLeft;
29             y -= dom.offsetTop;
30             oPos.x = x;
31             oPos.y = y;
32         } );
33         return oPos;
34     };
35 
36 })(window);
37 </script>
38 <style>
39 #canvas{
40     border:1px dashed #aaa;
41 }
42 </style>
43 <script>
44 window.onload = function(){
45     var oCanvas = document.querySelector( "#canvas" ),
46         oGc = oCanvas.getContext( '2d' ),
47         width = oCanvas.width, height = oCanvas.height,
48         oInfo = document.querySelector( "#info" ),
49         oPos = G.getPos( oCanvas );
50         oCanvas.addEventListener( "mousemove", function(){
51             
52             oGc.clearRect( 0, 0, width, height );
53             oGc.beginPath();
54             oGc.moveTo( oPos.x, 0 );
55             oGc.lineTo( oPos.x, height );
56             oGc.moveTo( 0, oPos.y );
57             oGc.lineTo( width, oPos.y );
58             oGc.closePath();
59             oGc.strokeStyle = '#09f';
60             oGc.stroke();
61 
62             oInfo.innerHTML = '鼠标的当前坐标是:('   oPos.x   ','   oPos.y   ')';
63         }, false );
64 }
65 </script>
66 </head>
67 <body>
68 <canvas id="canvas" width="500" height="400"></canvas>
69 <div id="info"></div>
70 </body>

[js高手之路] html5 canvas种类教程 - arc绘制曲线图形(曲线,弧线,圆形)

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

[js高手之路] html5 canvas连串教程 - 认知canvas以致宗旨使用方法

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

 1 function bindEvent(obj, event, fn) {
 2         if (obj.attachEvent) { //ie
 3             obj.attachEvent('on'   event, function () {
 4                 fn.call(obj);
 5             });
 6         } else {
 7             //chrome&ff
 8             obj.addEventListener(event, fn, false);
 9         }
10     }

四、点击'run code'能够预览效果额

[js高手之路] html5 canvas种类教程 - 状态安详严整(save与restore)

run code

有了前头的canvas底工之后,现在起来就白玉无瑕了,后边写的canvas教程都以归于综合接受,前面早就写了常用的canvas底工知识,参谋链接如下:

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

[js高手之路] html5 canvas类别教程 - 精通画直线图形的常用API

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划