查看手机唯一标识:http://html5plus.org/doc/zh_cn/device.html#plus.device.uuid html和html5的区别? html5+css3也逐渐的成为新一代web前端技术,最要用处在开发手机网站. 文档网站:http://www.w3school.com.cn/html5/index.asp HTML5的新功能 (1)、强大的绘图功能 (2)、新增音频/视频标签 (3)、浏览器离线存储 (4)、通过浏览器进行定位 外网连接局域网的项目:花生壳?内网穿透? 页面中自适应手机: <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> 高德开放平台:高德程序员、创建应用、添加新key Html5标签 HTML5 视频 <video src="movie.ogg" controls="controls"> </video> HTML5 音频 <audio src="song.ogg" controls="controls"> </audio> HTML5 拖放 HTML5 画布:Canvas 定义画布,宽200. 高 100 <canvas id="myCanvas" width="200" height="100"></canvas> Javascript对画布进行处理 <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); //创建2d画布 cxt.fillStyle="#FF0000"; //画布填充色 cxt.fillRect(0,0,150,75); //填充矩形 (x,y ,width,hegiht) </script> HTML5 SVG HTML5 画布 vs SVG HTML5 地理定位 单独没有意义,你要取得座标(经度和纬度) 与 地图合起来用 <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> HTML5 Web 存储 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 它们的语法都是 xxxx.变量名=”值“; HTML5 应用缓存 HTML5 Web Workers HTML5 服务器发送事件 都是移动app用的 数字:<input type="number" placeholder="请输入数字" /> <hr/> 邮箱:<input type="email" placeholder="请输入邮箱"/> <hr/> 电话:<input type="number" /> <hr/> 日期:<input type="date" /> <hr/> 范围:<input type="range" name="points" min="1" max="10" /> 1、创建一个画布 var circlePoint={"context":null,"timer":null, "x":20, "y":10}; window.onload=function(){ fillColor(); }; function $(id){ return document.getElementById(id); } function fillColor(){ var obj=$("can"); //得到2d画布 circlePoint.context=obj.getContext("2d"); //填充 蓝色的背景 circlePoint.context.fillStyle="#FFCC99"; circlePoint.context.fillRect(0,0,500,500); //画笔的颜色 是红色,粗40px,字体黑体 circlePoint.context.fillStyle="red"; circlePoint.context.font="40px 黑体"; circlePoint.context.fillText("Hello Html5!",150,200,500); //画一个圆 drawCircle(); //制作一个定时器 circlePoint.timer=setInterval(drawCircle,20); } //画一个圆 function drawCircle(){ //清空 circlePoint.context.clearRect(0,0,500,500); //填充 蓝色的背景 circlePoint.context.fillStyle="#FFCC99"; circlePoint.context.fillRect(0,0,500,500); circlePoint.context.fillStyle="blue"; //定义开始画圆的路径 circlePoint.context.beginPath(); circlePoint.context.arc(circlePoint.x,circlePoint.y,10,0,Math.PI*2,true); circlePoint.context.closePath(); //结束 circlePoint.context.fill(); //填充 //坐标要变 circlePoint.x+=2; circlePoint.y+=2; if(circlePoint.x>=500){ clearInterval(circlePoint.timer); } } <canvas id="can" width="500" height="500"></canvas> <script> 2、画图片 //一个对象的方法 function pai(){ var o=new Object(); o.index=0; //下标,为了解决图片 异步加载渲染问题 o.num=0; o.src=""; return o; } var can = { "context": null, "pkLen": 4, "margin": 10, "pk": [] }; function $(id) { return document.getElementById(id); } window.onload = function() { loadCanvas(); loadPk(); }; //1、加载数据 function loadCanvas() { var a = $("can"); can.context = a.getContext("2d"); //填充 蓝色的背景 can.context.fillStyle = "#FFCC99"; can.context.fillRect(0, 0, 470, 180); } //2、随机生产PK牌 function loadPk() { //要生成几张 var pkArr = randomNumPK(); console.log(pkArr); //填充PK到画布上面 for(var i=0;i<pkArr.length;i++){ var pk=pkArr[i]; var img=new Image(); img.src=pk.src; img.id=pk.num; //牌号 img.index=pk.index; //图片本身渲染异步完成后才能加载。否则空白 img.onload=function(){ console.log(this); var x=10+this.index*105; can.context.drawImage(this,x,10); }; } } //随机生成指定个数的不重复的1-54的打扑克对象 function randomNumPK() { var rd = Math.floor(Math.random() * 100); //定义一个数来存储4个数字 var nums = []; do { if(rd >= 1 && rd <= 54) { //true代表已经存了 var result = nums.some(function(item, index, array) { return(item == rd); }); //不存在 if(!result) { var pkn = new pai(); //工厂方法,每一次都会被实例化一个对象 pkn.num = rd; pkn.src = "img/" + rd + ".jpg"; pkn.index=nums.length; nums.push(pkn); } } //重新生成 rd = Math.floor(Math.random() * 100); } while (nums.length != can.pkLen); return nums; } </script> </head> <body> <!-- 画4 张片 105-180 = 470 --> <canvas id="can" width="470" height="180"> </canvas> </body>
时间: 2024-10-07 06:29:38