HTML5
文章平均质量分 82
叨唠
弘德、博学、敏行、敢先
展开
-
html5的canvas知识总结(8)isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则
1. ctx.isPointInPath(80,80):判断点是否在上面路径的区域内。ctx.isPointInStroke(80,50):判断点是否在上面路径的边缘线上。浏览器支持情况:(1)Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。注释:Internet Expl...原创 2018-09-15 16:25:20 · 3024 阅读 · 2 评论 -
HTML5——drag拖拽
1. 给标签元素添加属性:draggable = “true”,该元素即可被拖拽,任何元素都可以被拖拽特点:拖走的是灵魂2. 事件(1)可拖拽元素的事件dragstart事件:被拖拽元素,开始被拖拽时触发dragend事件:被拖拽元素,拖拽完成时触发注意:e.target对象上,是拖拽元素的所有信息,包括属性、方法、对象等。需要了解一下:(2)目标元素事...原创 2018-09-21 11:47:09 · 1032 阅读 · 0 评论 -
html5的canvas知识总结(7)clip、globalCompositeOperation、drawImage、toDataURL、getImageData、putImageData
复习知识:beginPath() :开启一个新的路径,在画直线的时候,需要开启一个新的路径,在上一个路径下,移动画笔位置closePath():闭合路径,在画图的时候,直接将未连接的图形,闭合连接1. clip() 方法:从原始画布中剪切任意形状和尺寸注意:clip()方法会将他上面代码所绘制的图形的区域裁剪,在裁剪区内的内容会显示,裁剪区之外的内容不会显示。用begi...原创 2018-09-15 12:18:50 · 1903 阅读 · 0 评论 -
HTML5——多媒体:audio音频、video视频
1. audio音频标签、video视频标签2. 特性:(1)autoplay:自动播放;注意:在谷歌浏览器中autoplay有时会失效(其他浏览器没有测试),不知道为什么(2)controls:显示控件(3)preload(none、metadata、auto):预加载none:不需要预加载;metadata:元数据,比如:时长,比特率,帧大小;auto:浏览器根据自身情...原创 2018-09-20 13:00:41 · 1016 阅读 · 0 评论 -
html5的canvas知识总结(6)
1.阴影阴影的x轴偏移量:ctx.shadowOffsetX = 20;阴影的y轴偏移量:ctx.shadowOffsetY = 20;阴影的颜色:ctx.shadowColor = 'green';阴影模糊程度:ctx.shadowBlur=10;2. 文本——在canvas中写入文本关于文本的额外方法:(1)strokeText():描边文本;(2)fillTe...原创 2018-09-14 21:50:57 · 314 阅读 · 0 评论 -
HTML5——监听手机的一些事件:手机加速度devicemotion、设备方向变化deviceorientation、手机摇一摇、指南针
1. devicemotion:监听手机加速度变化的事件(比如:手机疯狂摇摆)属性:均为只读属性(1)accelerationIncludingGravity:重力加速度(包括重心引力9.8)(2)acceleration:加速度(需要设备陀螺仪支持)(3)rotationRate(alpha,beat,gamma);旋转速度(4)interval:获取的时间间隔摇一摇:...原创 2018-09-19 22:36:46 · 3106 阅读 · 1 评论 -
HTML5——Geolocation对象的getCurrentPosition()、watchPosition()、clearWatch()方法
1.window.navigator.geolocation获取Geolocation对象2. getCurrentPosition()方法:获取当前位置信息纬度:latitude经度:longitude海拔:altitude定位精准度(单位:米):accuracy,定位时以网络IP的位置为准。海拔精准度(单位:米):altitudeAccuracy方向:headi...原创 2018-09-19 18:42:52 · 16040 阅读 · 1 评论 -
html5的canvas知识总结(5)
1. 填充图案英语:pattern 图案createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频,或者其他 <canvas> 元素。(1)图片createPatter(image, "repeat | repeat-x | repeat-y | no-repeat") 该方法要结合:fillStyle()和fillRect()方法一起使用...原创 2018-09-14 16:57:27 · 229 阅读 · 0 评论 -
html5的canvas知识总结(4)
canvas画布的特点:超出画布的内容不显示。 1. 坐标轴的转换:下面几个方法的调用都会影响后续点的坐标。(1)translate(x, y):该方法之后的点的坐标,全部+x +y详情:http://www.w3school.com.cn/tags/canvas_translate.asp注意:调用translate对之后的内容起作用。(2)scale(x, y):...原创 2018-09-14 14:15:35 · 266 阅读 · 0 评论 -
HTML5——worker
1. js是单线程,可以通过worker创建一个异步的js线程,将计算好的结果返回给js主线程。2. 要满足同源策略,在服务器中打开测试3. 基本操作worker.js文件:结果:4. 断开worker(1)worker.terminate():调用者断开worker:在调用者接收到worker返回的值后,不要worker的情况下,将worker断开;断开后不能...原创 2018-09-19 16:18:25 · 759 阅读 · 0 评论 -
html5的canvas知识总结(3)
1. 圆角arcTo()什么是圆角?就是直角,但是角是圆弧的起始点:moveTo(x, y);arcTo(x1, y1, x2, y2, r); 注意:r的大小不受其他值影响 注意:起始点是(x, y),终止点是切点,图片上的绿圈...原创 2018-09-13 22:05:35 · 168 阅读 · 0 评论 -
HTML5练习题
1. 通过canvas写一个小物块的移动 <canvas width="200" height="400" id="canvas1"></canvas> <script> var oCanvas = document.getElementById('canvas1'); //获取canvas var ctx = oC..原创 2018-09-13 20:45:04 · 4592 阅读 · 0 评论 -
HTML5——history实现单页面
1. 单页Web应用(single page web application,SPA)history.back():URL回退一次history.forward():URL前进一次history.go(n):URL几次history.back()或几次history.forward(),比如:history.go(2):两次history.forward();history.go(-2...原创 2018-09-19 11:42:40 · 2639 阅读 · 0 评论 -
html5的canvas知识总结(2)
1. rect()方法:画矩形rect(x, y, w, h):矩形左上角的点为起点(x, y),w,h是矩形的宽高; 效果: 问:矩形的最后的画笔在哪里? 答:还在(x, y)起始位置。rect方法结合stroke和fill方法,也可以使用:fillRect(x, y, w, h) 或 stroke...原创 2018-09-13 20:05:52 · 215 阅读 · 0 评论 -
HTML5客户端存储Web Storage
1. Web Storage支持情况:IE8以上的主流浏览器都支持Web Storage,IOS平台和Android平台对Web Storage都有很好的支持。localStorage:存储在本地磁盘,永久存储。sessionStorage:临时存储,数据保存在浏览器内存中,当浏览器关闭,内存将被自动清除。Web Storage特点:(1)设置和读取数据方便(2)容量大,ses...原创 2018-09-18 21:05:32 · 254 阅读 · 0 评论 -
html5的canvas知识总结(1)
1. 浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素2. canvas基础知识:canvas是inline-block类型。(1)在css样式中,设置canva...原创 2018-09-13 17:35:11 · 315 阅读 · 0 评论 -
用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout
1. 浏览器的刷新时间和定时器的时间不同,会出现掉帧现象,定时器的时间越短,掉帧越严重。定时器的时间并不是非常精准,会将定时器放在执行队列中,也是要花费时间的。浏览器的刷新时间大约是16ms(电脑此时的性能等因素),所以定时器的时间过短,页面没有刷新,动画效果根本没有。理解:两条线,第一条线:浏览器每16ms刷新一次,页面将显示最新的内容;第二条线:定时器每多少ms执行一次,每一次执行定时...原创 2018-09-18 17:35:19 · 1797 阅读 · 1 评论 -
HTML5canvas实现高斯模糊、刮刮乐
1.高斯模糊(Gaussian blur)原理:将图片插入到canvas中,将canvas中的图片,getImageData得到图片的像素值,用高斯模糊函数进像素值进行处理后,再把值putImageData放到canvas中,就实现了图片的高斯模糊处理。高斯模糊函数中的逻辑:注意:此处是window整个页面进行加载,不可以用img来调用onload方法,会报错:高斯函数未被定义的错误。...原创 2018-09-16 22:06:29 · 1653 阅读 · 0 评论 -
HTML5——读取文件FileReader对象上传文件
1. 方法:(1)abort()方法:终止读取(2)readAsText(file,[encoding])方法:将文件读取为文本(3)readAsBinaryString(file)方法:将文件读取为二进制编码(4)readAsDataURL(file)方法:将文件读取为DataURL编码(5)readAsArrayBuffer(file)方法:将文件读取为arraybuffe...原创 2018-09-21 17:13:13 · 766 阅读 · 1 评论