![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
h5和css3
无悟饭空
一个立志要从事十年的迷路码农
展开
-
移动端的TouchEvent对象
在移动端我们可以有多个手指去操作,所以会有多个对象;changedTouches- 触发当前事件的手指列表- 该列表包含了我们常用的clientXheclientY的必要信息;targetTouches- 触发当前事件元素上的手指列表touches- 触发当前事件时,屏幕上的手指列表;...原创 2020-03-14 15:59:02 · 174 阅读 · 0 评论 -
移动端a标签跳转方案
a标签在促发touchend事件时,a标签就会跳转;touchmove最终也会触发touchend,所以会导致误触;代码显示// 全面禁止移动端事件的默认行为document.addEventListener('touchstart',function(ev){ ev = ev || event; ev.preventDefault();})// 获取页面中所有的a标签var...原创 2020-03-14 15:50:05 · 835 阅读 · 0 评论 -
移动端事件点透
pc端的事件可以在移动端触发pc端事件有300毫秒延迟移动端事件不会有延迟html代码<body><div id="item"></div><a href="http://www.baidu.com">Baidu</a></body>css代码#item{ // 让item绝对定位,脱离文档流在a标签...原创 2020-03-14 15:38:11 · 157 阅读 · 0 评论 -
全面禁止移动端事件的默认行为和单独开启元素的默认事件;
event.preventDefault();该方法可以取消元素上event.cancelable属性为true的默认事件。在移动端所有的event.cancelable属性为true;所有我们可以用event.preventDefault()来全面禁止事件的默认行为代码显示:// 给document上的所有的某一个事件添加DOM2的事件监听document.addEventLis...原创 2020-03-14 14:44:40 · 475 阅读 · 0 评论 -
移动端实现1物理像素
rem适配 下的1物理像素实现(function(){ var dpr = window.devicePixelRatio||1; var styleNode = document.creatElement('style'); var w = document.documentElement.clientWidth*dpr/16 ; styleNode.innerHtml = 'ht...原创 2020-03-14 14:26:33 · 84 阅读 · 0 评论 -
rem适配
什么是em和rem?1em=1倍的自身fontsize;1rem=1倍的html(根标签)的fontsize;适配的作用适配是为了实现在不同页面上实现等比;如何设置一个div的width在不同设备上实现满屏?我们设置html的fontsize为布局视口的宽度html.style.fontSize = document.documentElement.clientWidth + 'px...原创 2020-03-14 14:01:05 · 225 阅读 · 0 评论 -
viewpoint适配
适配的作用将所有设备的布局视口的宽度调整为设计图的宽度;viewport适配的原理在viewport适配方案中,每一个元素的不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的。viewport适配的优缺点优点:所量即所得;缺点:没有完美视口;viewport适配代码解析html代码<!-- viewport适配时,页面中先预留viewport...原创 2020-03-14 14:00:46 · 729 阅读 · 0 评论 -
viewport的meta标签
我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。pc端:用户缩放影响的布局视口的尺寸,会影响布局。移动端:用户缩放影响的视觉视口的尺寸。(页面布局不会乱)initial-scale初始化缩放,也叫系统缩放。系统缩放是参照与理想视口(独立设备像素)进行缩放,同时控制布局视口和视觉视口。当设置initial-scale=1时,等同于widt...原创 2020-03-10 19:13:11 · 172 阅读 · 0 评论 -
布局视口、视觉视口、理想视口
布局视口在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上,并且不会出现滚动条。这个时候,视口的宽度还是和浏览器窗口的宽度一致。我们都知道pc端的页面一般都为960px或者1024px。那么要完整的放下它们,我们移动端浏览器必须要有个容器放下它,而且只有有了这个容器我们才能规定移动端的浏览器到底能放下多大的页面。这个容器我...原创 2020-03-10 17:59:08 · 1640 阅读 · 0 评论 -
物理像素、css像素、位图像素、设备独立像素、像素比
物理像素也叫设备像素。物理像素是设备成像的最小单位。我们买手机的时候会有一个n*m的分辨率,那是屏幕的n*m个呈像的点。一个点(小方格)为一个物理像素。它是屏幕能显示的最小粒度。注意: 任何设备的物理像素的数量是固定的,任何一款设备上1物理像素的大小是不会改变的。 不同设备上1物理像素的大小可能是不一样的。css像素它是一个抽象的单位,主要使用在浏览器上,用来精确的度量web页...原创 2020-03-09 13:31:43 · 558 阅读 · 0 评论 -
屏幕尺寸、屏幕分辨率、高清屏、屏幕像素密度
屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54里面。屏幕分辨率指在横纵向上的像素点数,单位是px,1px=1像素点。一般以纵向*横向像素来表示一个手机的分辨率。如:1960*1080(这里的1像素指的是物理设备的1个像素点)屏幕像素密度屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写;屏幕像素密度跟屏幕分辨率和屏幕尺寸有关;...原创 2020-03-09 12:39:34 · 1840 阅读 · 0 评论 -
元素垂直水平居中的几种方法
已知宽高:1、利用绝对定位盒模型的特性;绝对定位的盒模型有以下特性:left+right+width+水平方向的margin+padding=包含块的width;top+bottom+height+垂直方向的margin+padding=包含块的height;代码示例:#parent{ /* 父相子绝 */ position: relative; ...原创 2020-02-26 14:27:38 · 117 阅读 · 0 评论 -
HTML5应用缓存
HTML5中我们可以轻松构建一个离线应用;只需要创建一个cache manifest文件;优势:1、可配置需要缓存的资源;2、网络无连接应用仍可以使用;3、本地缓存资源,可提升访问速度,增强用户体验;4、减少请求,缓解服务器负担;缓存清单这是一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,一般使用.appcache为后缀名。该文件需要添加到需要缓存页面的根元素(ht...原创 2020-02-21 22:35:22 · 150 阅读 · 0 评论 -
HTML5新增web存储
Window.sessionStorage该属性允许你访问一个 session Storage 对象;存储在 sessionStorage 里面的数据在页面会话结束时会被清除。同一浏览器的页面都可以访问;Window.localStorage该属性允许你访问一个Document 源(origin)的对象 Storage;存储在 localStorage 的数据可以长期保留;同一浏览器...原创 2020-02-21 22:17:14 · 147 阅读 · 0 评论 -
HTML5新增拖拽事件
在HTML5中,认为任何元素都可以拖拽;首先设置被拖拽的元素的attribute属性:<input draggable="true">拖拽七兄弟源对象事件dragstart当用户开始拖动元素或选择文本时触发此事件。drag拖动元素或选择文本时触发此事件。drop当在有效放置目标上放置元素或选择文本时触发此事件。该事件浏览器默认阻止,可以在dragover中设置...原创 2020-02-21 21:50:52 · 356 阅读 · 0 评论 -
HTML5新增文件操作
files对象这个对象是上传的文件对象集合;里面包含了每个上传文件的信息和上传文件的length;需要给input元素添加change事件监听;var inputFile=document.getElementById('file');inputFile.onchange=function(){ console.log(this.files);}FileReader对象可以读...原创 2020-02-21 20:06:49 · 302 阅读 · 0 评论 -
HTML5新增网络检测事件监听
online当用户网络重新连接时触发window.addEventListener('online',function(){})offline当用户网络断开的时候促发window.addEventListener('offline',function(){})原创 2020-02-21 15:34:18 · 401 阅读 · 0 评论 -
HTML5新增表单的property属性
HTML5中新增表单的property多用于表单验证;validity对象validity对象上面有8个属性值;通过下面的invalid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false;首先要给元素节点添加事件监听:node.addEventListener("invalid",fn1,false);常用的validity对象的属性:valueMis...原创 2020-02-21 15:22:42 · 314 阅读 · 0 评论 -
HTML5新增表单类型
Html5 Forms概述,在Html5中:1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性form的action 指向一个服务器地址(接口)2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值 注意表单项的name属性必须有值,服务器才能获取表单3.所有之前的表单控件都保持不变4.仍然可以使用脚本操作表单控件Html5之前的...原创 2020-02-21 14:46:05 · 473 阅读 · 0 评论 -
自定义video播放器的常用的事件。
window.onresize这个事件主要用于当浏览器窗口发生改变时,实时获取video的width和height;代码示例:window.onresize=function() { // 控制窗口不小于800时,进行video的width和height的重新获取; if(document.documentElement.clientWidth>=800) { ...原创 2020-02-21 13:02:48 · 1808 阅读 · 0 评论 -
HTML5对音视频的设计
html5中音视频相关标签<video>:Html5提供的播放视频的标签src:资源地址controls:该属性定义是显示还是隐藏用户控制界面<audio>:Html5提供的播放音频的标签src:资源地址controls:该属性定义是显示还是隐藏用户控制界面<source>视频:type=‘video/webm; codecs=“vp8, ...原创 2020-02-17 14:19:40 · 198 阅读 · 0 评论 -
音频和视频简介
大家都有在网页中浏览视频的经历,但在Html5之前,对视频乃至音频都还没有一个标准因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件,你完全意识不到它们的存在在介绍Html5中的音视频标签前,我们需要了解一些概念1. 容器大多数人会认为视频文件就是 .avi .mp4,但事实上 avi...原创 2020-02-17 13:28:31 · 337 阅读 · 0 评论 -
canvas中的isPointInPath(x,y)
ctx.isPointInPath(x,y)它是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。语法boolean ctx.isPointInPath(x, y);boolean ctx.isPointInPath(x, y, fillRule);boolean ctx.isPointInPath(path, x, y);boolean ctx.isPointI...原创 2020-02-15 22:01:18 · 715 阅读 · 0 评论 -
canvas画布导出为图片
toDataURL这是canvas元素上的API方法返回一个包含图片展示的 data URI语法:canvas.toDataURL(type, encoderOptions);type | 可选 图片格式,默认为 image/pngencoderOptions | 可选 在指定图片格式为 image/jpeg 或 image/webp的情况下, 可以从 0 到 1 的区间内选择图...原创 2020-02-15 21:50:04 · 1309 阅读 · 0 评论 -
canvas综合运用:刮刮卡
代码示例:html结构和css样式<style type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; overflow: hidden; } #wrap,ul,li { ...原创 2020-02-15 21:22:15 · 90 阅读 · 0 评论 -
canvas的全局透明度和覆盖合成
全局透明度的设置globalAlpha = value这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明)默认是 1.0覆盖合成这里的source指的是:新的图像(源)这里的destination指的是:已经绘制过的图形(目标)globalCompositeOperation source-over(默认值):源在上面,...原创 2020-02-15 20:45:43 · 841 阅读 · 0 评论 -
canvas马赛克实现
canvas马赛克思路1、设定一个马赛克矩形的大小比如设定为5,就是一个(width:5px;height:5px)的矩形,2、从马赛克矩形中随机取出一个像素点信息,即rgba值;3、将整个马赛克矩形中的像素点信息统一调成随机抽出的那个当马赛克矩形为1时,就没有马赛克了代码示例:window.onload = function() { var canvas = docum...原创 2020-02-15 17:42:21 · 659 阅读 · 0 评论 -
canvas像素操作函数封装
获取单个像素点信息函数:// 传入一个ImageData对象,x轴的坐标,y轴的坐标function getPxInfo(imgdata,x,y){ var color = []; //获取ImageData对象中的data var data = imgdata.data; // ImageData 新对象的宽度。 var w = imgdata.width; // ImageDa...原创 2020-02-15 14:19:23 · 213 阅读 · 1 评论 -
canvas像素操作
得到场景像素数据:getImageData()获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据ctx.getImageData(sx, sy, sw, sh) sx:将要被提取的图像数据矩形区域的左上角 x 坐标。 sy:将要被提取的图像数据矩形区域的左上角 y 坐标。 sw:将要被提取的图像数据矩形区域的宽度。 sh:将要被提取的图像数据矩形区域的高度...原创 2020-02-15 13:22:31 · 236 阅读 · 0 评论 -
canvas中文本水平居中代码示例
window.onload = function(){ var canvas = document.getElementById('c1'); if(canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.font = '40px sans-serif'; // 获取输入文字的宽度 var w...原创 2020-02-14 18:56:38 · 85 阅读 · 0 评论 -
canvas绘制文本
canvas中绘制文本canvas 提供了两种方法来渲染文本:fillText(text, x, y) 在指定的(x,y)位置填充指定的文本;strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框;代码示例:ctx.fillText("无悟饭空",100,100);ctx.strokeText("无悟饭空",100,100);文本样式font ...原创 2020-02-14 18:36:33 · 1831 阅读 · 0 评论 -
canvas中的渐变
canvas的线性渐变createLinearGradient(x1, y1, x2, y2);表示渐变的起点 (x1,y1) 与终点 (x2,y2)gradient.addColorStop(position, color);gradient :createLinearGradient的返回值addColorStop 方法接受 2 个参数,position 参数必须是一个 0.0 ...原创 2020-02-14 16:35:35 · 172 阅读 · 0 评论 -
canvas中使用图片
canvas中插入图片1.canvas操作图片时,必须要等图片加载完才能操作2.drawImage(image, x, y, width, height)其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小canvas中...原创 2020-02-14 16:20:56 · 441 阅读 · 0 评论 -
canvas的变换
canvas中的translate(x,y)它用来移动 canvas的原点到一个不同的位置。translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量,在canvas中translate是累加的canvas中的rotate(angle)这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。旋转的中心点始终是 canvas 的原点,如果要改变...原创 2020-02-13 22:48:31 · 156 阅读 · 0 评论 -
canvas画圆
角度转弧度js表达式:radians=(Math.PI/180)*degrees。弧度=270*Math.PI/180; //270角度转成弧度;canvas绘制圆形api:arc()arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到end...原创 2020-02-13 21:51:49 · 197 阅读 · 0 评论 -
鼠标事件中容易被忽略的API
element.setCapture在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素,直到鼠标按钮被释放或者 document.releaseCapture() 被调用。语法element.setCapture(retargetToElement);retargetToElement 如果被设置为 true, 所有事件被直接定向到这个元素; ...原创 2020-02-13 21:32:01 · 149 阅读 · 0 评论 -
canvas绘制路径
canvas绘制路径图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。canvas绘制基本步骤1.首先,你需要创建路径起始点。2.然后你使用画图命令去画出路径3.之后你把路径封闭。4.一旦路径生成,你就能通过描边或填充路径区域来渲染图形。beginPath()新建一条路径,生成之后,图形绘制命令被指向到路径上准备生成路径。 生成路径的第一步叫...原创 2020-02-13 19:38:14 · 550 阅读 · 0 评论 -
canvas绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径;绘制矩形的三种方法首先要获取画布和画笔var canvas = document.querySelector("#test");//获取画布if(canvas.getContext){ var ctx = canvas.getContext("2d");//获取画笔}绘制方法的A...原创 2020-02-13 18:05:56 · 284 阅读 · 0 评论 -
canvas的基本用法
canvas的默认高宽默认width:300px;默认height:150px;什么是canvas(画布)<canvas>是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图像;例如:它可以用于绘制图形,创建动画。<canvas>最早由Apple引入Webkit使用<canvas>标签时,建议要成对出现,不要使用自闭合形式。c...原创 2020-02-13 17:13:43 · 692 阅读 · 0 评论 -
html5中新增的语义化标签
语义化标签的由来在HTML5出来之前,我们用div来表示页面头部、章节、页脚等。但是这些div没有实际的意义。各大浏览器厂商分析了上百万个页面,从中发现DIV名称的通用ID大量重复。例如很多开发人员喜欢<div id=“footer”></div>来标记页脚的内容,HTML5引入了语义化标签(一组新的片段类元素)常用语义化标签hgroup对网页或区段(sec...原创 2020-02-13 16:50:27 · 326 阅读 · 0 评论