现在数字都成主流了，HTML5就是让网页变得花样百出的那把金钥匙。今天咱就来聊聊HTML5是怎么让咱们和网页互动起来的！
一、画布（Canvas）的魅力
html5-坦克大战
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"> //得到画布 var canvas1 = document.getElementById("tankMap"); //定义一个位置变量 var heroX = 80; var heroY = 80; //得到绘图上下文 var cxt = canvas1.getContext("2d"); //设置颜色 cxt.fillStyle="#BA9658"; //左边的矩形 cxt.fillRect(heroX,heroY,5,30); //右边的矩形 cxt.fillRect(heroX+17,heroY,5,30); //画中间的矩形 cxt.fillRect(heroX+6,heroY+5,10,20); //画出坦克的盖子 cxt.fillStyle="#FEF26E"; cxt.arc(heroX+11,heroY+15,5,0,360,true); cxt.fill(); //画出炮筒 cxt.strokeStyle="#FEF26E"; cxt.lineWidth=1.5; cxt.beginPath(); cxt.moveTo(heroX+11,heroY+15); cxt.lineTo(heroX+11,heroY); cxt.closePath(); cxt.stroke();
看看！网页可不止是文字、图片，简直就像是一片能让你自由发挥的艺术天地！这次要介绍的HTML5画布功能（Canvas）可谓神器，它用JavaScript就能让我们在页面上天马行空地绘出各种图案，不管是简单的线，还是炫酷的动画都不在话下！举个例子，我们甚至可以画出一辆霸气侧漏的坦克来，提前感受一把坦克大战的刺激！这可不仅仅是种技能，更是创意与想象力的迸发
二、地理位置：探索未知的世界
用上HTML5，网页可以用到我们的实际位置来提供更多有用的信息！比如说，现在我们打开网页后，不单可以看到当前地点的天气预报，还会有好吃好玩的地方推荐。这个功能就是靠HTML5的地理位置API实现的，简单几行代码就完成准确定位，让网页更具个性还实用！
三、表单的革命：更智能的输入体验
点击这个按钮，获得您的位置：
var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
HTML5可不只是让网页看起来好看点，它还能提高我们填写表单的感觉！新加入的表单元素和功能，比如输入类型、验证规则和自动完成，都能使填写过程更顺手、效率更高。虽然这些改变小，但是却大大改善了用户体验，更低频率地犯错，也更精确地搜集到了所需信息
四、本地存储：数据的安全港
在用HTML5以前，网页存不了啥数据。可是HTML5有个好东西叫本地存储，能让网页在你手机或者电脑里头多赚点内存。这样一来，服务器压力小很多，也不用担心上网时断网了，没法看页面了。存个购物清单，没网络的时候看看文章，都行！所以说，本地存储让网页的功能变得更强大！
五、多媒体的自由：无插件播放
以前没装Flash啥的就看不了视频音频？现在HTML5的多媒体标签改进了这个问题！音频和视频直接在网页就能播，不需要额外的插件。这样做兼容性更好，网页看着更顺眼。
六、语音搜索：未来的交互方式
随着科技越来越牛，语音互动已经不知不觉地融入到了我们日常生活中。HTML5这个大兄弟还特意加了语音搜索这招，网页听懂你说话后就能帮你办事儿！不管是视觉有困扰的朋友还是忙得没法打字的普罗大众，甚至是手头不巧，只要说句话，搜索马上搞定，真是太方便了！
总结：
HTML5这个新玩意儿可是给网页带来了好多新鲜感和实用性，比如说直接就能在浏览器里播放音乐或者拍摄照片，真是太酷了！每次有新的进展出现，网页设计就显得更有人情味，咱们上网的日子也就变得越来越有意思。那么，关于HTML5你们最喜欢哪个特点？快来评论区聊聊天，记得点赞转发让更多小伙伴们知道这事儿！
评论0