html+js实现软键盘

合集下载

Javascript编写的软键盘代码

onclick="setpassvalue();"></td>'); div_str += ('</tr>'); div_str += ('<tr align="left" valign="middle">'); div_str += ('<td><input type="button" onclick="addValue(\'q\');" value=" q "></td>'); div_str += ('<td><input type="button" onclick="addValue(\'w\');" value=" w "></td>'); div_str += ('<td><input type="button" onclick="addValue(\'e\');" value=" e "></td>'); div_str += ('<td><input type="button" onclick="addValue(\'r\');" value=" r "></td>'); div_str += ('<td><

html软键盘

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="jquery-1.3.1.js"></script><script>function randomsort(a, b) {return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1}//打乱键盘function rup(){var numbers = [1,2,3,4,5,6,7,8,9,0];numbers.sort(randomsort);var buttons = $('#keys input');for(i=0;i<numbers.length;i++){buttons[i].value=numbers[i];}}//按键函数function clickFun(){var buttons = $('#keys input');for(i=0;i<buttons.length;i++){$(buttons[i]).click(function(){var v = this.value;var vv = $('#pwdInput').val();if(vv.length<$('#pwdInput').attr("maxlength"))$('#pwdInput').val(vv+v);});}}//启动按键功能--清空输入框function clear(){$('#clear').click(function(){$('#pwdInput').val('');});}//启动按键功能--打乱键盘function goRup(){$('#rup').click(function(){rup();})}//载入函数$(function(){goRup();clickFun();clear();rup();})</script></head><body><input type="text" maxlength="6" size="8" value="" id="pwdInput"/> <input type="button" id="clear" value="清空"/><input type="button" id="rup" value="打乱键盘"/><table id="keys"><tr><td><input type="button" value="1"></td><td><input type="button" value="2"></td><td><input type="button" value="3"></td></tr><tr><td><input type="button" value="4"></td><td><input type="button" value="5"></td><td><input type="button" value="6"></td></tr><tr><td><input type="button" value="7"></td><td><input type="button" value="8"></td><td><input type="button" value="9"></td> </tr><tr colspan="3"><td><input type="button" value="0"></td></tr></table></body></html>。

数字软键盘

jquery插件--数字软键盘2009-07-01 14:45if(jQuery) (function($){//定义键盘代码var _numkeybordhtml = "<div id=\"numkeybord\">\n"+ "<table id=\"main\"><tr>\n"+ "<td colspan=\"2\" id=\"esc\">退出</td>\n"+ "<td colspan=\"2\" id=\"back\">退格</td></tr>\n"+ "<tr><td class=\"key\">7</td>\n"+ "<td class=\"key\">8</td>\n"+ "<td class=\"key\">9</td>\n"+ "<td class=\"key\">4</td></tr>\n"+ "<tr><td class=\"key\">5</td>\n"+ "<td class=\"key\">6</td>\n"+ "<td class=\"key\">1</td>\n"+ "<td class=\"key\">2</td></tr>\n"+ "<tr><td class=\"key\">3</td>\n"+ "<td class=\"key\">0</td>\n"+ "<td colspan=\"2\" id=\"enter\">确定</td></tr>\n"+ "</table>\n"+ "</div>\n";//定义插件jQuery.fn.numkeybord = function(_option){//键盘追加到网页中$(document.body).append(_numkeybordhtml);var _obj = this;jQuery.each(_obj,function(i,_o){$(_o).bind('click.show',function(){ _show(this); });});$("#numkeybord td#esc,#numkeybord td#enter").bind('click.hide',function(){ _hide();});$("#numkeybord td.key").bind('click.returnkey',function(){var tmp = $("#numkeybord").attr("target");var obj_tmp = $("#"+tmp);_returnkey(obj_tmp,$(this).text());$(this).blur();});$("#numkeybord td#back").bind('click.back',function(){var tmp = $("#numkeybord").attr("target");var obj_tmp = $("#"+tmp);_back(obj_tmp);});var _isover = false;var _isover2 = false;$("#numkeybord").hover(function(){_isover = true;},function(){_isover = false;});$(_obj).hover(function(){_isover2 = true;},function(){_isover2 = false;});$(document).click(function(){$("#debug").text(_isover + "|" + _isover2);if(_isover == false && _isover2 == false){$("#numkeybord").css({display:'none'});}});if(_option == null)return;else{if(_option.enter == false)$("td#enter").unbind('click.hide').css({color:"#999999"});if(_option.esc == false)$("td#esc").unbind('click.hide').css({color:"#999999"});if(_option.back == false)$("td#back").unbind('click.back').css({color:"#999999"});}}//键盘与元素绑定及显示function _show(_input){var _offset = $(_input).offset();var _left = _offset.left;var _top = _offset.top + $(_input).height() + ($.browser.msie ? 5 : 6); $("#numkeybord").attr("target",_input.id).css({left:_left + "px",top:_top + "px",display:'block'});_focus(_input);}//输入操作function _returnkey(_input,_val){if($(_input).val().length >= $(_input).attr("maxlength")) return;var tmpval = $(_input).val() + _val;$(_input).val(tmpval);//$(_input).focus();_focus(_input);}//光标返回function _focus(_input){//$(_input).focus();if($.browser.msie){var rng = $(_input)[0].createTextRange();rng.collapse(false);rng.select();}else{$(_input).focus();}}//退格操作function _back(_input){var _len = $(_input).val().length;var _tmp = $(_input).val();$(_input).val(_tmp.substr(0,_len-1));_focus(_input);}//键盘关闭function _hide(_input){var tmp = $("#numkeybord").attr("target");var obj_tmp = $("#"+tmp);$("#numkeybord").css({display:'none'});//$(obj_tmp).focus();_focus(obj_tmp);}})(jQuery);============================================================================页面上调用方法：<script language="javascript" src="jquery.js"></script><script language="javascript" src="numkeybord.js"></script>$(function(){$("#password").numkeybord();});样式：<style>#numkeybord{ position:absolute; border:#999999 solid 1px; background:#FFFFFF; width:104px; font-size:12px; line-height:20px; display:none;}#numkeybord #main{ list-style:none; border:#999900 dashed 0px; margin:0px auto 1px auto; width:104px; padding:0px; overflow:auto; }#numkeybord #main td{ text-align:center; border:#CCCCCC solid 1px; padding:1px; margin:1px; width:20px; height:20px; display:block; float:left; cursor:pointer;}#numkeybord #main td#back{ width:46px;}#numkeybord #main td#enter{ width:46px;}#numkeybord #main td#esc{ width:46px;}#numkeybord #main td#hover{ background:#333333; color:#FFFFFF;}</style>。

js实现键盘操作实现div的移动或改变的原理及代码

js实现键盘操作实现div的移动或改变的原理及代码昨天记录了获取键盘按键的值的事件，有了值，⽆⾮就是针对不同值做不同的操作嘛，⽽且之前曾经在写贪吃蛇时也⽤到过。

结果⼀捯饬，⼜是好久的⼀段时间，所以感觉有必要记录下的，⼀⽅⾯确有可取之处，另⼀⽅⾯也对⾃⼰的提醒，刚刚实现过的功能转头⼜是陌⽣⼈了，总的来说，算是温故⽽知新吧。

这样我们先来分析，要实现键盘操作实现div的移动⼤概的原理吧：*---要实现div的移动，⾸先最关键的⼀点：获取div对象*---postion：absolute将div完全从⽂档流中拖出啊，这个地⽅漏掉了，回去看了贪吃蛇才发现的，真晕*---获取键盘的操作*---根据键盘的不同操作，给出不同响应这就是我想起的⼤概需要注意的地⽅，还是先来看代码：先是html部分<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">然后记录下javascript的实际操作window.onload=function(){var obj=document.getElementById("showZone");//获取到对象了吧，这最简单var a=10;var toLeft=toRight=toTop=toBottom=false;//定义⼏个boolean型变量，是为了后⾯⽅向操作⽤的，看是四个⽅向吧var move=setInterval(function(){//这个地⽅的move定义实际上毫⽆意义，只是为了让这个⽅法更明显⼀点if(toLeft){obj.style.left=parseInt(obj.offsetLeft-a)+"px";//感觉最好还是写上parseInt，另外，因为offsetLeft是不含px的，所以不要忘记“px”}if(toRight){obj.style.left=obj.offsetLeft+a+"px";//不写parseInt也可以，难道是因为javascript的执⾏顺序？执⾏+，再执⾏+，再执⾏=？实现结果来看是}if(toTop){obj.style.top=obj.offsetTop-a+"px";}if(toBottom){obj.style.top=obj.offsetTop+a+"px";}},300); //这个经典的定时器啊，循环执⾏的⼤神器，还记得setInterval和settimeout的区别么document.onkeydown=function(event){var event=event||window.event;switch(event.keyCode){ //哈哈，获取到键盘操作了吧case 37:toLeft=true;break;//改变变量，继续执⾏最初的循环，不让你停不能停啊case 38:toTop=true;break;case 39:toRight=true;break;case 40:toBottom=true;break;}};document.onkeyup=function(event){switch(event.keyCode){case 37:toLeft=false;break;//给我变回来，让你停就别动了case 38:toTop=false;break;case 39:toRight=false;break;case 40:toBottom=false;break;}};};就这样，我们完成了原理分析中的需求，同时也就可以通过上、下、左、右按键来实现div的上下左右移动了，接下来，再来记录下敏感地⽅吧。

JavaScript模拟实现键盘打字效果

JavaScript模拟实现键盘打字效果$(function () {var input_type = {init:function ($obj) { = $obj.html().split("")this.length = .length;this.i = 0;},pri:function () {var $this = this//在此处只能使⽤闭包，因为windown.settimeout使函数的this指向object windown，⽽⾮原型链的this对象。

⽽此时我需要递归，所以只能将this对象传到闭包内，递归匿名的闭包函数。

return (function () {if ($this.i > $this.length) {window.clearTimeout(Go)return false;}var char = $$(".div1").append(char[$this.i])$this.i++var Go = window.setTimeout(arguments.callee, 100)//在这⾥arguments.callee妙⽤因为是匿名闭包，调⽤函数本⾝。

})}}//建⽴class类function Input_type() {this.init.apply(this, arguments)}Input_type.prototype = input_type//创建实例var p = new Input_type($(".content"))p.pri()()});总结：为了实现每次循环间隔时间，⽤window.settimeout递归的写法。

因为想⽤原型链封装，this冲突，所以递归调⽤匿名的闭包函数。

⽤arguments.callee表⽰匿名函数。

HTML代码：<button id="pri">pri</button><div class="content" style="display: none;"> 我与⽗亲不相见已⼆年余了，我最不能忘记的是他的背影。

做触摸屏项目用到的js软键盘中文切换

JavaScript VirtualKeyboard （JS虚拟键盘）做触摸屏项目用到的js软键盘中文切换！JavaScript VirtualKeyboard是 Javascript下的虚拟键盘,不仅如此,它还支持自建输入法,你所看到的所有内容都是由其内建输入法所输入,并且支持多种语言。

使用方法：1 在<head></head>中加入<script type="text/javascript" src="vk_loader.js?vk_layout=CN Chinese Simpl. Pinyin" ></script>2 打开虚拟键盘：VirtualKeyboard.toggle('target_input_field_id','keyboard_holder_id');意思是：VirtualKeyboard.toggle('显示输入数据的元素ID','显示键盘所在位置的元素ID');如： <input id="showkb" type="button" value="虚拟键盘" onclick="VirtualKeyboard.toggle('testb','keyboard'); return false;" />当前仅支持IE6/7 on the local PC 。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝原文：Using of the code is quite simple:1.Add the following lines to the head:<LINK title="virtualkeyboard" href="keyboard/keyboard.css" type="text/css" rel="stylesheet" /> <SCRI PT src="vk_loader.js" type="text/javascript"></SCRIPT>2.And the following lines somewhere at the pag e with edit form:VirtualKeyboard.isOpen() ? VirtualKeyboard.close(): VirtualKeyboard.show('target_input_field_id','keyb oard_holder_id');i.e. I use it in the event handler to open the keyboard on button click3.(optional) Note: only IE6/7 on the local PC currently supported.1.Run /setup/setup.html to generate desired layouts from the sources.2.Copy /setup/out/layouts.js to /layouts/layouts.jsYes, that's all. No need to write any code, or whatever else. The solution is really solid.Demo: http://debugger.ru/demo/projects/virtualkeyboard/demo_inline.htmlSite: http://debugger.ru/projects/virtualkeyboard我测试用的完成代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/D TD/xhtml1-strict.dtd"><html><head><title>Virtual Keyboard</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="vk_loader.js?vk_layout=CN Chinese Simpl. Pinyin" ></script></head><body><table cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"><form action="" method="get"><div>主题:<br /><input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" /><br /> 密码 (可以用虚拟键盘输入):<br /><input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualK eyboard.attachInput(this)" /><br />内容:<br /><textarea name="testb" id="testb" type="text" cols="55" rows="10" wrap="soft" onfocus="VirtualKey board.attachInput(this)"></textarea> <br /><input id="showkb" type="button" value="虚拟键盘" onclick="VirtualKeyboard.toggle('testb','keyboard'); return false;" /><br /><div id="keyboard"></div></div></form></td></tr></table></body></html>参考：/html/wzjsxw/516.html。

Javascript编写的软键盘代码

//定义当前是否大写的状态var CapsLockValue=0;var InputControlID = "";var UILang = "CN";var old_onscroll_event=null;var old_onresize_event=null;function create_keyboard(){var div_str = "";div_str += ('<DIV align="center" id="softkeyboard" name="softkeyboard" style="position:absolute; left:0px; top:0px; width:517px; z-index:180;display:none">');div_str += ('<FORM name="Calc" action="" method="post" autocomplete="off">');div_str += ('<INPUT type="hidden" value="ok" name="action2">');div_str += ('<table width="348" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FF9900">');div_str += ('<tr>');div_str += ('<td align="left" bgcolor="#FF9900" align="center">');div_str += ('<INPUT type="button" value="重新输入" name="reset_input" onclick="ResetInput()">');div_str += ('<input name="showCapsLockValue" type="button" onClick="setCapsLock();" value="当前是小写">');div_str += ('<input type="button" value="关闭" name="close_key" onclick="closekeyboard();"></td>');div_str += ('</tr>');div_str += ('<tr> ');div_str += ('<td align="center" bgcolor="#FFFFFF" align="center"> <table align="center" width="98%" border="0" cellspacing="0" cellpadding="0">');div_str += ('<tr align="left" valign="middle">');div_str += ('<td><input type="button" onclick="addValue(\'1\');" value=" 1 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'2\');" value=" 2 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'3\');" value=" 3 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'4\');" value=" 4 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'5\');" value=" 5 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'6\');" value=" 6 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'7\');" value=" 7 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'8\');" value=" 8 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'9\');" value=" 9 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'0\');" value=" 0 "></td>');div_str += ('<td><input type="button" onclick="addValue(\'-\');" value=" - "></td>');div_str += ('<td><input type="button" onclick="addValue(\'_\');" value=" _ "></td>');div_str += ('<td colspan=3><input type="button" value="BackSpace"onclick="setpassvalue();"></td>');div_str += ('</tr>');div_str += ('<tr align="left" valign="middle">');div_str += ('<td><input type="button" onclick="addValue(\'q\');" value=" q "></td>');div_str += ('<td><input type="button" onclick="addValue(\'w\');" value=" w "></td>');div_str += ('<td><input type="button" onclick="addValue(\'e\');" value=" e "></td>');div_str += ('<td><input type="button" onclick="addValue(\'r\');" value=" r "></td>');div_str += ('<td><input type="button" onclick="addValue(\'t\');" value=" t "></td>');div_str += ('<td><input type="button" onclick="addValue(\'y\');" value=" y "></td>');div_str += ('<td><input type="button" onclick="addValue(\'u\');" value=" u "></td>');div_str += ('<td><input type="button" onclick="addValue(\'i\');" value=" i "></td>');div_str += ('<td><input type="button" onclick="addValue(\'o\');" value=" o "></td>');div_str += ('<td><input type="button" onclick="addValue(\'p\');" value=" p "></td>');div_str += ('<td><input type="button" onClick="addV alue(\':\');" value=" : "></td>');div_str += ('<td><input type="button" onClick="addV alue(\';\');" value=" ; "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'`\');" value=" ` "></td>');div_str += ('<td colspan=2><input type="button" onclick="closekeyboard();" value=" Enter"></td>');div_str += ('</tr>');div_str += ('<tr align="left" valign="middle">');div_str += ('<td><input type="button" onclick="addValue(\'a\');" value=" a "></td>');div_str += ('<td><input type="button" onclick="addValue(\'s\');" value=" s "></td>');div_str += ('<td><input type="button" onclick="addValue(\'d\');" value=" d "></td>');div_str += ('<td><input type="button" onclick="addValue(\'f\');" value=" f "></td>');div_str += ('<td><input type="button" onclick="addValue(\'g\');" value=" g "></td>');div_str += ('<td><input type="button" onclick="addValue(\'h\');" value=" h "></td>');div_str += ('<td><input type="button" onclick="addValue(\'j\');" value=" j "></td>');div_str += ('<td><input type="button" onclick="addValue(\'k\');" value=" k "></td>');div_str += ('<td><input type="button" onclick="addValue(\'l\');" value=" l "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'[\');" value=" [ "></td>');div_str += ('<td><input type="button" onClick="addV alue(\']\');" value=" ] "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'{\');" value=" { "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'&\');" value=" & "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'+\');" value=" + "></td>');div_str += ('<td></td>');div_str += ('</tr>');div_str += ('<tr align="left" valign="middle">');div_str += ('<td><input type="button" onclick="addValue(\'z\');" value=" z "></td>');div_str += ('<td><input type="button" onclick="addValue(\'x\');" value=" x "></td>');div_str += ('<td><input type="button" onclick="addValue(\'c\');" value=" c "></td>');div_str += ('<td><input type="button" onclick="addValue(\'v\');" value=" v "></td>');div_str += ('<td><input type="button" onclick="addValue(\'b\');" value=" b "></td>');div_str += ('<td><input type="button" onclick="addValue(\'n\');" value=" n "></td>');div_str += ('<td><input type="button" onclick="addValue(\'m\');" value=" m "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'<\');" value=" < "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'>\');" value=" > "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'(\');" value=" ( "></td>');div_str += ('<td><input type="button" onClick="addV alue(\')\');" value=" ) "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'}\');" value=" } "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'\\x27\');" value=" \' "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'\\x22\');" value=\' " \'></td>');div_str += ('<td></td>');div_str += ('</tr>');div_str += ('<tr align="left" valign="middle">');div_str += ('<td><input type="button" onClick="addV alue(\',\');" value=" , "></td>');div_str += ('<td><input type="button" onclick="addValue(\'~\');" value=" ~ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'!\');" value=" ! "></td>');div_str += ('<td><input type="button" onclick="addValue(\'@\');" value=" @ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'#\');" value=" # "></td>');div_str += ('<td><input type="button" onclick="addValue(\'$\');" value=" $ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'%\');" value=" % "></td>');div_str += ('<td><input type="button" onclick="addValue(\'^\');" value=" ^ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'*\');" value=" * "></td>');div_str += ('<td><input type="button" onclick="addValue(\'|\');" value=" | "></td>');div_str += ('<td><input type="button" onclick="addValue(\'?\');" value=" ? "></td>');div_str += ('<td><input type="button" onclick="addValue(\'\/\');" value=" \/ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'\\x5c\');" value=" \\ "></td>');div_str += ('<td><input type="button" onclick="addValue(\'.\');" value=" . "></td>');div_str += ('<td><input type="button" onClick="addV alue(\'=\');" value=" = "></td>');div_str += ('</tr>');div_str += ('</table></td>');div_str += ('</tr>');div_str += ('</table>');div_str += ('</FORM>');div_str += ('</DIV>');document.write(div_str);}//给输入的密码框添加新值function addValue(newValue){var obj = document.getElementById(InputControlID);if (CapsLockValue==0){obj.value += newValue;}elseobj.value += newValue.toUpperCase();}}//实现BackSpace键的功能function setpassvalue(){var obj = document.getElementById(InputControlID);var longnum=obj.value.length;obj.value=obj.value.substr(0,longnum-1);}//function ResetInput(){var obj = document.getElementById(InputControlID);obj.value="";}//关闭软键盘function closekeyboard(){var softkeyboard = document.getElementById("softkeyboard");softkeyboard.style.display="none";window.onscroll=old_onscroll_event;window.onresize=old_onresize_event;}//显示软键盘function showkeyboard(input,lang){InputControlID = input;if(lang == "EN"){document.Calc.reset_input.value="Reset Input";document.Calc.close_key.value="Close";document.Calc.showCapsLockValue.value="Lower Case";UILang = lang;}var softkeyboard = document.getElementById("softkeyboard");softkeyboard.style.display="block";scroll_keyboard();scroll_keyboard();if(window.onscroll != scroll_keyboard)old_onscroll_event = window.onscroll;}if(window.onresize != scroll_keyboard){old_onresize_event = window.onresize;}window.onscroll=scroll_keyboard;window.onresize=scroll_keyboard;}//设置是否大写的值function setCapsLock(){if (CapsLockValue==0){CapsLockValue=1if(UILang == "CN"){document.Calc.showCapsLockValue.value="当前是大写";}else{document.Calc.showCapsLockValue.value="Upper Case ";}}else{CapsLockValue=0if(UILang == "CN"){document.Calc.showCapsLockValue.value="当前是小写";}else{document.Calc.showCapsLockValue.value="Lower Case ";}}}function scroll_keyboard(){var obj = document.getElementById("softkeyboard");obj.style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-obj.offsetHeight)+"px";obj.style.left=(document.documentElement.scrollLeft+document.documentElement.clientWi dth-obj.offsetWidth)+"px";}create_keyboard();。

利用HTML5Canvas制作键盘及鼠标动画的实例分享

利⽤HTML5Canvas制作键盘及⿏标动画的实例分享键盘控制⼩球移动众所周知，我们所看到的动画实际上就是⼀系列静态画⾯快速切换，从⽽让⾁眼因视觉残像产⽣了「画⾯在活动」的视觉效果。

明⽩了这⼀点后，在canvas上绘制动画效果就显得⽐较简单了。

我们只需要将某个静态图形先清除，然后在另外⼀个位置重新绘制，如此反复，让静态图形按照⼀定的轨迹进⾏移动，就可以产⽣动画效果了。

下⾯，我们在canvas上绘制⼀个实⼼⼩球，然后⽤键盘上的⽅向键控制⼩球的移动，从⽽产⽣动态效果。

⽰例代码如下：JavaScript Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>html5 canvas绘制可移动的⼩球⼊门⽰例</title>6. </head>7. <body onkeydown="moveBall(event)">8.9. 10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">11. 您的浏览器不⽀持canvas标签。

12. </canvas>13.14. <script type="text/javascript">15. //获取Canvas对象(画布)16. var canvas = document.getElementById("myCanvas");17.18. //表⽰圆球的类19. function Ball(x, y ,radius, speed){20. this.x = x || 10; //圆球的x坐标，默认为1021. this.y = y || 10; //圆球的y坐标，默认为1022. this.radius = radius || 10; //圆球的半径，默认为1023. this.speed = speed || 5; //圆球的移动速度，默认为524.25. //向上移动26. this.moveUp = function(){27. this.y -= this.speed;28. if(this.y < this.radius){29. //防⽌超出上边界30. this.y = this.radius;31. }32. };33.34. //向右移动35. this.moveRight = function(){36. this.x += this.speed;37. var maxX = canvas.width - this.radius;38. if(this.x > maxX){39. //防⽌超出右边界40. this.x = maxX;41. }42. };43.44. //向左移动45. this.moveLeft = function(){46. this.x -= this.speed;47. if(this.x < this.radius){48. //防⽌超出左边界49. this.x = this.radius;50. }51. };52.53. //向下移动54. this.moveDown = function(){55. this.y += this.speed;56. var maxY = canvas.height - this.radius;57. if(this.y > maxY){58. //防⽌超出下边界59. this.y = maxY;60. }61. };62. }63.64. //绘制⼩球65. function drawBall(ball){66. if(typeof ctx != "undefined"){67. ctx.beginPath();68. ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);69. ctx.fill();70. }71. }72.73. //清空canvas画布74. function clearCanvas(){75. if(typeof ctx != "undefined"){76. ctx.clearRect(0, 0, 400, 300);77. }78. }79.80. var ball = new Ball();81. //简单地检测当前浏览器是否⽀持Canvas对象，以免在⼀些不⽀持html5的浏览器中提⽰语法错误82. if(canvas.getContext){83. //获取对应的CanvasRenderingContext2D对象(画笔)84. var ctx = canvas.getContext("2d");85. drawBall(ball);86. }87.88. //onkeydown事件的回调处理函数89. //根据⽤户的按键来控制⼩球的移动90. function moveBall(event){91. switch(event.keyCode){92. case 37: //左⽅向键93. ball.moveLeft();94. break;95. case 38: //上⽅向键96. ball.moveUp();97. break;98. case 39: //右⽅向键99. ball.moveRight();100. break;101. case 40: //下⽅向键102. ball.moveDown();103. break;104. default: //其他按键操作不响应105. return;106. }107.108. clearCanvas(); //先清空画布109. drawBall(ball); //再绘制最新的⼩球110. }111. </script>112. </body>113. </html>请使⽤⽀持html5的浏览器打开以下⽹页以查看实际效果(使⽤⽅向键进⾏移动)：。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<head>
<title>JS:软键盘</title>
<script src="StringBuffer.js"></script>
<script>
function showKey(ev){
var buf=new StringBuffer();
var d=document.getElementById("dKey");
var exist="";
var rn;
var srn;
buf.append("<table width='120' height='160'><tbody>");
for(var i=0;i<10;i++){
do{
rn=Math.floor(Math.random()*10);
srn=""+rn;
}while(exist.indexOf(srn)!=-1);
exist+=srn;
if(i%3==0)
buf.append("<tr>");
buf.append("<td><input class='btnNum' type='button' value='"+
srn+"' onclick='doNumber("+srn+")' /></td>");
if(i%3==2)
buf.append("</tr>");
}
buf.append("<td><input class='btnOp' type='button' value='C'"+ " onclick='doClear()' /></td>");
buf.append("<td><input class='btnOp' type='button' value='X'"+ " onclick='doClose()' /></td></tr>");
buf.append("</tbody></table>");
d.innerHTML=buf.toString();
var x,y;
if(window.event){
x=event.clientX;
y=event.clientY;
}
else{
x=ev.clientX;
y=ev.clientY;
}
d.styl
e.left=x-40;
d.styl
e.top=y+8;
d.styl
e.display="block";
}
function doNumber(n){
document.getElementById("txtPwd").value+=n;
}
function doClear(){
document.getElementById("txtPwd").value="";
}
function doClose(){
document.getElementById("dKey").style.display="none";
}
</script>
<style>
#dKey{
position:absolute;
width:120px;
height:160px;
z-index:1;
background-color:#33ccff;
display:none;
}
.btnNum{
width:32px;
height:32px;
}
.btnOp{
width:32px;
height:32px;
color:red;
background-color:yellow;
font-weight:bold;
}
</style>
</head>
<body>
<form action="ex1.html" mathod="get">
<table align="center" width="600" border="1">
<tbody>
<tr><td width="100" align="right">登录名：</td>
<td><input name="loginName" id="txtLogin" />
</td></tr>
<tr><td width="100" align="right">密码：</td>
<td><input name="pwd" id="txtPwd" readonly />
<input type="button" value="软键盘" onclick="showKey(event)" /> </td></tr>
<tr><th align="center" colspan="2">
<input type="submit" value="提交" />
<input type="reset" value="重置" /></th></tr>
</tbody>
</table>
</form>
<div id="dKey"></div>
</body>
</html>。