可视化域名网站模块被删了,个人网站可以做app吗,官方网站建设建议,服装品牌凡客演示html5 canvas鼠标事件#xff0c;获取canvas对象上的鼠标坐标#xff0c;演示键盘事件通过键盘控制canvas上对象移动。canvas对象支持所有的javascript的鼠标事件#xff0c;包括鼠标点击(mouseclick), 鼠标按下(mouse down), 鼠标抬起(mouse up),鼠标移动( mouse move)…演示html5 canvas鼠标事件获取canvas对象上的鼠标坐标演示键盘事件通过键盘控制canvas上对象移动。canvas对象支持所有的javascript的鼠标事件包括鼠标点击(mouseclick), 鼠标按下(mouse down), 鼠标抬起(mouse up),鼠标移动( mouse move)对canvas添加鼠标事件方式有两种一种方式是通过api来完成复制代码代码如下:// mouse eventcanvas.addeventlistener(mousedown,domousedown,false);canvas.addeventlistener(mousemove, domousemove,false);canvas.addeventlistener(mouseup, domouseup, false);另外一种方式在javascript中称为反模式复制代码代码如下:canvas.onmousedown function(e){}canvas.onmouseup function(e){}canvas.onmousemove function(e){}获取鼠标在canvas对象上坐标由于canvas上鼠标事件中不能直接获取鼠标在canvas的坐标所获取的都是基于整个屏幕的坐标。所以通过鼠标事件e.pagex与e.pagey来获取鼠标位置然后通过canvas. getboundingclientrect()来获取canvas对象相对屏幕的相对位置通过计算得到鼠标在canvas的坐标代码如下复制代码代码如下:function getpointoncanvas(canvas, x, y) {var bbox canvas.getboundingclientrect();return { x: x- bbox.left *(canvas.width / bbox.width),y:y - bbox.top * (canvas.height / bbox.height)};}键盘事件html5 canvas本身不支持键盘事件监听与获取常用的有两种方法来解决这个问题一通过windows对象来实现canvas键盘事件监听与处理// key event - use window as objectwindow.addeventlistener(keydown, dokeydown,true);二通过在canvas对象上添加其它支持键盘事件的dom元素实现键盘事件支持复制代码代码如下:// key event - use dom element asobjectcanvas.addeventlistener(keydown, dokeydown,true);canvas.focus();其中tabindex为html5 dom元素支持键盘事件。演示一个可以根据键盘上下左右移动的矩形块: 一个完整的鼠标与键盘事件演示代码如下复制代码代码如下:var tempcontext null; // global variable 2d contextvar started false;var mtext_canvas null;var x 0, y 0;window.addwindow.onload function() {var canvas document.getelementbyid(event_canvas);console.log(canvas.parentnode.clientwidth);canvas.width canvas.parentnode.clientwidth;canvas.height canvas.parentnode.clientheight;if (!canvas.getcontext) {console.log(canvas not supported. please install a html5 compatible browser.);return;}// get 2d context of canvas and draw rectangeltempcontext canvas.getcontext(2d);tempcontext.fillstyleblue;x canvas.width/2;y canvas.height/2;tempcontext.fillrect(x, y, 80, 40);// key event - use dom element as objectcanvas.addeventlistener(keydown, dokeydown, true);canvas.focus();// key event - use window as objectwindow.addeventlistener(keydown, dokeydown, true);// mouse eventcanvas.addeventlistener(mousedown, domousedown, false);canvas.addeventlistener(mousemove, domousemove, false);canvas.addeventlistener(mouseup, domouseup, false);}function getpointoncanvas(canvas, x, y) {var bbox canvas.getboundingclientrect();return { x: x - bbox.left * (canvas.width / bbox.width),y: y - bbox.top * (canvas.height / bbox.height)};}function dokeydown(e) {var keyid e.keycode ? e.keycode :e.which;if(keyid 38 || keyid 87) { // up arrow and wclearcanvas();y y - 10;tempcontext.fillrect(x, y, 80, 40);e.preventdefault();}if(keyid 39 || keyid 68) { // right arrow and dclearcanvas();x x 10;tempcontext.fillrect(x, y, 80, 40);e.preventdefault();}if(keyid 40 || keyid 83) { // down arrow and sclearcanvas();y y 10;tempcontext.fillrect(x, y, 80, 40);e.preventdefault();}if(keyid 37 || keyid 65) { // left arrow and aclearcanvas();x x - 10;tempcontext.fillrect(x, y, 80, 40);e.preventdefault();}}function clearcanvas() {tempcontext.clearrect(0, 0, 500, 500)}function domousedown(event) {var x event.pagex;var y event.pagey;var canvas event.target;var loc getpointoncanvas(canvas, x, y);console.log(mouse down at point( x: loc.x , y: loc.y ));tempcontext.beginpath();tempcontext.moveto(loc.x, loc.y);started true;}function domousemove(event) {var x event.pagex;var y event.pagey;var canvas event.target;var loc getpointoncanvas(canvas, x, y);if (started) {tempcontext.lineto(loc.x, loc.y);tempcontext.stroke();}}function domouseup(event) {console.log(mouse up now);if (started) {domousemove(event);started false;}}html部分复制代码代码如下:html canvas event demo - by gloomy fishpress w, a, s, d keys to move
