随笔分类 -  HTML5

第182天：HTML5——地理定位
摘要：HTML5 Geolocation（地理定位） HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 浏览器支持情况 Internet Explorer 9+, Firefox, Chrome, Safari 阅读全文
posted @ 2018-03-02 23:23 小胖橘乐乐 阅读(220) 评论(0) 推荐(0)
第181天：HTML5——视频、音频
摘要：一、HTML5新增的video、source标签 二、HTML5支持的视频格式 三、video标签的属性 四、HTML5的音频标签 HTML5支持的音频格式 .wav .mp3 五、音频标签的属性 六、浏览器默认播放控件 七、自定义播放控件相关API video.webkitRequestFullS 阅读全文
posted @ 2018-03-01 22:31 小胖橘乐乐 阅读(184) 评论(0) 推荐(0)
第180天：HTML5——本地存储
摘要：本地存储 客户端存储数据的方法 cookie 方法 localStorage方法 sessionStorage方法 一、localStorage 1、存储特点： localStorage方法存储的数据没有时间限制。第二天、第二周甚至是第二年之后，数据依然可用。 不能跨浏览器读取数据 2、 API： 阅读全文
posted @ 2018-02-28 22:34 小胖橘乐乐 阅读(174) 评论(0) 推荐(0)
第167天：canvas绘制柱状图
摘要：canvas绘制柱状图 1、HTML 2、HistogramChart.js 运行效果： 阅读全文
posted @ 2018-02-05 22:52 小胖橘乐乐 阅读(756) 评论(0) 推荐(0)
第166天：canvas绘制饼状图动画
摘要：canvas绘制饼状图动画 1、HTML 2、PieChart.js 运行效果： 阅读全文
posted @ 2018-02-04 23:00 小胖橘乐乐 阅读(410) 评论(0) 推荐(0)
第165天：canvas绘制圆环旋转动画
摘要：canvas绘制圆环旋转动画——面向对象版 1、HTML 注意引入Konva.js库 2、CircleText.js 运行效果： 阅读全文
posted @ 2018-02-03 23:18 小胖橘乐乐 阅读(2816) 评论(0) 推荐(0)
第162天：canvas中Konva库的使用方法
摘要：本篇接着上一篇：第157天：canvas基础知识详解 继续来写。 五、Konva的使用快速上手 5.1 Konva的整体理念 Stage | + + + | | Layer Layer | | + + + Shape | | Group Group | | + + + + | | | Shape G 阅读全文
posted @ 2018-01-31 22:52 小胖橘乐乐 阅读(1883) 评论(0) 推荐(0)
第157天：canvas基础知识详解
摘要：目录 一、canvas简介 1.1 什么是canvas？（了解） 1.2 canvas主要应用的领域（了解） 二、canvas绘图基础 2.0 sublime配置canvas插件（推荐） 2.1 Canvas标签 2.1.1 canvas标签语法和属性 （重点） 2.1.2 浏览器不兼容处理（重点） 阅读全文
posted @ 2018-01-26 22:01 小胖橘乐乐 阅读(1659) 评论(1) 推荐(0)
第156天：canvas（三）
摘要：一、变形 1.1 translate translate(x, y) ​ 用来移动 canvas 的原点到指定的位置 ​ translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。 在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原 阅读全文
posted @ 2018-01-25 22:50 小胖橘乐乐 阅读(482) 评论(0) 推荐(0)
第155天：canvas(二）
摘要：一、添加样式和颜色 ​ 在前面的绘制矩形章节中，只用到了默认的线条和颜色。 ​ 如果想要给图形上色，有两个重要的属性可以做到。 fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形轮廓的颜色 备注： 1、fillStyle 2、strokeStyl 阅读全文
posted @ 2018-01-24 22:43 小胖橘乐乐 阅读(261) 评论(0) 推荐(0)
第154天：canvas基础（一）
摘要：一、canvas简介 ​ <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出 阅读全文
posted @ 2018-01-24 11:53 小胖橘乐乐 阅读(349) 评论(0) 推荐(0)
第139天：详解cookie、 sessionStorage 和localStorage
摘要：1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 2.HTML5 提供了两种在客户端存储数据的新方法：(http://www.w3s 阅读全文
posted @ 2018-01-08 23:07 小胖橘乐乐 阅读(233) 评论(0) 推荐(0)
第90天：HTML5中文件API和拖放操作
摘要：一、文件API File API：提供客户端本地操作文件的可能 二、拖放操作 在捕获drop事件时，必须先阻止默认事件。 阅读全文
posted @ 2017-11-20 23:05 小胖橘乐乐 阅读(299) 评论(0) 推荐(0)
第89天：HTML5中 访问历史、全屏和网页存储API
摘要：一、访问历史 API 通过history对象实现前进、后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性，所以IE9以下的是不支持的。 1、history.replaceState( 阅读全文
posted @ 2017-11-19 23:01 小胖橘乐乐 阅读(443) 评论(0) 推荐(0)
第88天：HTML5中使用classList操作css类
摘要：在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。 一、Element.classList 这个classList对象里有很多有用的 阅读全文
posted @ 2017-11-18 23:31 小胖橘乐乐 阅读(308) 评论(0) 推荐(0)
第87天：HTML5中新选择器querySelector的使用
摘要：一、HTML5新选择器 1、document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, 阅读全文
posted @ 2017-11-17 23:00 小胖橘乐乐 阅读(2288) 评论(0) 推荐(0)
第86天：HTML5应用程序标签和智能表单
摘要：一、HTML5应用程序标签 1、datalist需要数据载体 input list属性指向数据源 2、progress进度条 -webkit-appearance: none; /*如果要改默认样式 要先取消默认样式 */ .my-progress::-moz-progress-bar { /*选中 阅读全文
posted @ 2017-11-16 23:30 小胖橘乐乐 阅读(379) 评论(0) 推荐(0)
第85天：HTML5语义化标签
摘要：一、语义标签 语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。 传统的做法我们或许通过增加类名如class="header"、class= 阅读全文
posted @ 2017-11-15 23:00 小胖橘乐乐 阅读(269) 评论(0) 推荐(0)