HTML5
关注
分享
扫一扫
html5学习
水晶果冻1125
这个作者很懒，什么都没留下…
展开
-
HTML5学习第1篇——简介
HTML5学习第一篇HTML5简介定义设计目的优缺点优点缺点新特性浏览器支持HTML5简介定义HTML5是HTML最新的修订版本,是下一代HTML标准。设计目的为了在移动设备上支持多媒体。优缺点优点多设备跨平台,可移植性好自适应网页设计“一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局即时更新SEO友好、利用搜索引擎抓取和搜录便于游戏...原创 2018-09-18 15:18:47 · 548 阅读 · 0 评论 -
HTML5学习第19篇——旋转与缩放
1、旋转方法rotate() 方法旋转当前的绘图。 JavaScript 语法： context.rotate(angle);参数值参数 描述 angle 旋转角度，以弧度计。 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。 举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。 ...原创 2018-12-12 16:10:16 · 597 阅读 · 0 评论 -
HTML5学习第20篇——canvas动画综合练习
1、目标绘制直角坐标系内的随机折线图，折线图包含5-10个拐点。2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas 练习</title> <style type原创 2018-12-12 16:20:29 · 623 阅读 · 0 评论 -
HTML5学习第13篇——canvas之beginPath
开始学习canvas动画，先来个简单的示例，了解一下canvas以及实际使用中的小问题。1、目标 画两条平行的直线，第一条线的颜色是红色、第二条线的颜色是绿色2、示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ca原创 2018-12-08 20:20:00 · 746 阅读 · 0 评论 -
HTML5学习第14篇——canvas之画布平移translate
canvas画布平移的方法是translate(x轴平移坐标，y轴平移坐标)，画布原点平移。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画布平移 translate</title>原创 2018-12-08 21:56:46 · 2401 阅读 · 1 评论 -
HTML5学习第15篇——canvas之线条样式
canvas线条样式练习：lineCap设置或返回线条末端线帽的样式。值 描述 butt 默认。向线条的每个末端添加平直的边缘。 round 向线条的每个末端添加圆形线帽。 square 向线条的每个末端添加正方形线帽。 提示："round" 和 "square" 会使线条略微变长。lineJoin 设置或返回两条线相交...原创 2018-12-08 23:20:30 · 766 阅读 · 0 评论 -
HTML5学习第9篇——网络监测
网络状态监测<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网络状态检测</title> <script type="text/javascript">原创 2018-12-07 15:09:25 · 289 阅读 · 0 评论 -
HTML5学习第10篇——地理信息定位
利用H5的geolocation对象进行地理信息定位示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>地理信息定位</title></head><原创 2018-12-07 15:23:11 · 826 阅读 · 0 评论 -
HTML5学习第11篇——本地存储之localStorage
HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2018-12-07 15:26:58 · 202 阅读 · 0 评论 -
HTML5学习第18篇——绘制虚线、文本、图片
1、绘制虚线setLineDash（数组） <canvas width="800" height="600"></canvas> <script type="text/javascript"> var c = document.querySelector('canvas'); var ctx = c.getContext("2d&原创 2018-12-12 15:53:43 · 1322 阅读 · 0 评论 -
HTML5学习第17篇——非零环绕
1、非零环绕原则 非零环绕原则： 如果需要判断某一个区域是否需要填充颜色，就从该区域中随机的选取一个点。从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心。看穿过拉出的直线的线段， 如果是顺时针方向就记为 +1, 如果是 逆时针方向，就记为 -1。最终看求和的结果. 如果是 0 就不填充， 如果是非零就填充。3、非零环绕示例示例1代码<!DOC...原创 2018-12-12 15:40:04 · 480 阅读 · 0 评论 -
HTML5学习第2篇——hack 技术
hack原创 2018-09-18 17:21:25 · 920 阅读 · 0 评论 -
HTML5学习第3篇-HTML5的前世今生和设计理念
引言想要深入的了解一个人就必须要知道这个人的过往经历和成长背景，因为是这些经历的叠加成就了这个人现在的样子。就像梁宁老师说的，一个人所表现出的样子就是这个人过往经历的叠加。学技术也一样，想深入的了解一门技术也需要知道技术的前世今生和设计理念。知道这些才知道语言真正的生命力，知道语言的背回是哪些人在为其付出努力，是不是你认可的模式。以下分享个人学习的总结图：HTML5的前世和今生说说它的背景...原创 2018-09-21 12:00:52 · 728 阅读 · 0 评论 -
HTML5学习第4篇——HTML5元素分类及各元素简介
HTML5元素分类html5元素分类图：1.结构性元素article与section元素名称元素释义特点article用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容article元素是一段独立完整的内容，通常组成=header+内容+footer，例如：博客或一篇文章、一篇论坛帖子section用于对网站和应用程序中页面上的内容进行分区...原创 2018-09-30 15:12:01 · 3005 阅读 · 0 评论 -
HTML5学习第5篇—viedo：自己实现viedo的播放控件（简版）
最近正在学习html5新增的媒体元素video，为了能够更熟悉video的属性、方法和事件，决定自己实现一下video的播放控件，因为是初学，只是写了个简版。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v原创 2018-11-24 23:54:47 · 1519 阅读 · 0 评论 -
HTML5学习第6篇—video：自己实现video的播放控件（添加样式版）
本篇博客接着上一篇文章，实现了一个带样式的video播放控件，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>video control</title> <link原创 2018-11-25 00:05:24 · 13568 阅读 · 0 评论 -
HTML5学习第7篇—自定义属性data-*
html5中的自定义属性，以data-开头，可以通过html5提供的api获取示例1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>h5 自定义属性 data</title></h原创 2018-11-28 22:40:56 · 247 阅读 · 0 评论 -
HTML5学习第8篇——FileReader
1、简介FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行m...原创 2018-11-30 12:00:19 · 243 阅读 · 0 评论 -
HTML5学习第16篇——线性渐变和径向渐变
1、线性渐变定义和用法createLinearGradient() 方法用于创建线性渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。 JavaScript 语法： context.createLinearGradient(x0,y0,x1,y1); 参数值 ...原创 2018-12-12 15:06:14 · 1351 阅读 · 0 评论 -
HTML5学习第12篇——本地存储综合示例
1、功能描述编写学生信息添加页面，利用本地存储保存学生信息，并从本地存储中读取学生信息以列表形式展示。添加学生信息-》存储学生信息-》展示学生信息2、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>本地存储练习原创 2018-12-07 15:52:19 · 273 阅读 · 0 评论