HTML5学习笔记
HTML5
1. 什么是html5
文章目录
简介
- HTML5 将成为HTML XHTML HTML DOM的新标准
- HTML5是针对目前web发展对原有HTML的补充和升级、并不是颠覆
- 将元素语义和元素内容呈现的影响分开，如取出font标签，添加article
- 使用标签完全从标签的语义触发，而不是表现形态
新特点
- HTML的一些有趣的新特性
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储更好的支持
- 新的特殊内容元素，比如article、footer、header、nav、section、
- 新的表单控件，比如calender、date、time、email、url、search、
浏览器支持
最新版本的Safari、Chrome、FireFox以及Opera支持某些HTML5特性，IE9支持某些特性
优势
- 提高可用性和改进用户体验
- 有几个新标签，有足浴开发人员定义重要内容
- 可以给站点带来更多的多媒体元素（视频和音频）
- 可以很好的替代FLASH和Silverlight
- 当设计网站抓取和索引是对SEO很友好
- 将被大量应用于移动移动程序和游戏
HTML5主要包括内容
- WebStorage：比cookie更大、更有弹性的存储
- Web SQL Datebase：本地端的SQL数据库
- indexed DB: Key-Value的本地数据库
- Application Cache: 将部分常用网页Cache起来，如移动端的首页
- WebSocket： 实时的socket联机
- Web Workers：以往JavaScript都是单线程，通过Worker可以有多线程。
- Notifications: 原生的提示讯息
- Dragn Drop：HTML元素的拖拉
- File API: 读取用户本机计算机的内容。
- Geolocation：地理定位
- Device orientation: 手持装置的方向。
- Speech input：语音输入
- New Tags: 新标签，如header、section
- Applicaiton tags：也是新标签，如meter progeress
- Microdate： 将入语义的数据让搜索引擎等网站正确显示
- Form type：表单可以加入的type更多了，包含email等
- Audio video：音视频的原生播放支持
- Canvas的绘图支持功能
- CSS3技术
2. 标签新变化
DOCTYPE:
meta设置编码:
link标签
script标签
新属性
- contenteditable 使内容可编辑
- hidden 使内容隐藏
直接在标签内部写属性名即可，也可写“属性名=‘true’”，实现功能相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新写法</title>
</head>
<body>
<h1>我是大标题h1</h1>
<h1 contenteditable >我是可直接编辑的大标题h1</h1>
<h1 contenteditable hidden>我是可直接编辑的大标题h1</h1>
</body>
</html>
3. web语义化
在html4以div来定义的头部、导航条等区块，html5以新的有固定含义的标签直接指定，如header、nav、footer等，方便浏览器和搜索引擎更精准的识别编写的网页。
新增的语义化标签
- header
- nav 导航
- article 文章
- aside 侧边栏
- footer
- section 表示文章章节
- time 时间
- address 地址
- code 代码
- mark 标记页面中重要的部分
- ins 给元素加下划线 相当于html4中的u标签
- del 给元素加删除线
- progress 进度条，但是在不同浏览器样式不一致，还不如自己用div写
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
header{
width: 1000px;
height: 100px;
background: dodgerblue;
margin:0 auto;
}
nav{
width: 1000px;
height: 50px;
margin:0px auto;
background: pink;
}
nav a{
float:left;
color:#000;
text-decoration: none;
line-height: 50px;
margin-left:20px;
text-align: center;
}
.main{
width: 1000px;
height: 500px;
margin:0px auto;
border: solid 1px cornflowerblue;
}
.main article{
height: 500px;
width:700px;
float:left;
background: lightgreen;
}
.main aside{
height: 500px;
width: 280px;
float:right;
background: yellow;
}
footer{
height: 100px;
width:1000px;
margin:0 auto;
background: mediumpurple;
}
.main header .desc{
font-size: 30px;
}
</style>
</head>
<body>
<header>
</header>
<nav>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
<a href="">导航条</a>
</nav>
<div class="main">
<article>
<h1>常见的高科技电子产品</h1>
<time datetime="2018-11-30 16:50:50">2018年11月30日16:50:36</time>
<p class="desc">本文详细介绍了大家在日常生活中常用的一些电子产品</p>
<!-- 文章章节 -->
<section>
<h3>手机</h3>
<p>
手机体积小，<mark>重量轻</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<ins>手机几乎人手一部</ins>
quis nostrud exercitation <del>之前因为体积手机体积很大 </del> ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3>电脑</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3>ipad</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</article>
<aside>
<h3>javascript for循环</h3>
<code>
var i = 0;
for (i = 0; i< 10; i++){
console.log(i);
}
</code>
<progress value="50" min="0" max="100">
</aside>
</div>
<footer>
<address>天津市南开区玉泉路2号</address>
</footer>
</body>
</html>
表单新增type类型有：
- email 必须符合邮箱格式: [email protected]，否则提交不了
- url 必须符合网址格式: http://www.baidu.com，同上
- number 可以在页面中通过上下箭头调整数字，可指定 min、max、step（调整的步长）、value等属性
- range 滑块，可指定 min、max、step（调整的步长）、value等属性
- date 日期类，点击后提供日期选择器选择框，但是兼容性不太好，因此都用第三方
- color 颜色，点击后弹出颜色选择器，选择什么颜色，表单值就是颜色值，同样兼容性不太好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="my.php">
姓名：<input type="text">
<br>
年龄：<input type="text">
<br>
密码：<input type="password">
<br>
以下为html5表单新增标签
<br>
邮箱：<input type="email"> 输入必须符合[email protected]，否则提交不了，下同。
<br>
URL：<input type="url"> 必须符合http://www.a.com格式
<br>
数字：<input type="number" min="0" step="2" max="50" value="10">获得光标后可以通过上下箭头调整数组
<br>
颜色：<input id="color" type="color"> 提交值就是颜色值
<br>
日期：<input type="date"> 点击后出现日期选择器，兼容性样式不一致，一般用第三方
<br>
滑块：<input id="r" type="range" min="0" max="50" ><span id="rsan">3</span>
<br>
<input type="submit" name="">
</form>
<script type="text/javascript">
window.onload= function(){
document.getElementById("r").onchange= function(){
console.log(this.value);
document.getElementById("rsan").innerHTML = this.value;
}
document.getElementById('color').onchange = function(){
alert(this.value);
}
}
</script>
</body>
</html>
表单新特性
- select 中新增了optgroup标签，用于给待选项分组
- datalist 单行文本的自定义列表，注意：input中的list的值对应datalist中id的值，两者才能绑定
- autofocus 自动聚焦表单
- 提交form以外的表单（html4中只能提交html4中的表单）：在form外的表单指定form属性，对应提交form的id值就能实现。
- 文件上传 以往html4中input的type=file文件上传只能上传一个，当加入新属性“multiple”可同时长传多个
- placeholder 文本框默认提醒，与value相比是光标聚焦时自动删除
- pattern 表单验证 直接在标签内写正则表达式验证输入
- required 表单不能为空
<!DOCTYPE html>
<html>
<head>
<title>autofos</title>
</head>
<body>
<form>
<!-- 1. placeholder是输入提示 -->
<!-- 2. autofocus 自动聚焦 -->
姓名：<input type="text" placeholder="请输入姓名" autofocus>
<br>
性别：<input type="text">
<br>
年龄：<input type="number">
<br>
<!-- 3. required是要求表单值不能为空 -->
邮箱：<input type="email" placeholder="请输入标准邮箱格式" required>
<br>
<!-- 4. pattern是正则表单验证 -->
手机号：<input type="text" pattern="\d{11}" placeholder="请输入11位手机号">
<br>
<!-- 5.multiple是允许同时上传多个文件 -->
头像：<input type="file" multiple >可同时上传多个文件
<br>
密码：<input type="password">
<br>
<input type="submit" name="">
</form>
</body>
</html>
多媒体标签
1.autdio 标签插入音乐 control属性显示控制框 autoplay自动播放 loop指定播放次数（只写loop就是反复播放）
2. video 标签插入视频，支持MP4、ogg、webm格式的视频文件、control属性显示控制框 autoplay自动播放 loop指定播放次数（只写loop就是反复播放）、poster是视频封面
controls 对于不同浏览器样式不一致，因此一般自定义控制视频播放的样式，这就用到了下边的多媒体API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<!-- autdio 插入音频 control显示视频控制台 autoplay自动播放 loopָ循环播放次数，如果只有一个loop那就是永久循环-->
<audio src="./file/1.mp3" controls autoplay loop></audio>
<br>
<br>
<!-- video插入视频 功能大体和audio相同 poster是视频封面 -->
<video src="./file/mov.ogg" controls poster="./file/p.png"></video>
</body>
</html>
多媒体API
以视频为例video介绍，audio类同
- play() 播放视频
- pause() 暂停播放
- currentTime 属性是当前播放时间，为其赋值是跳转到指定的时间
- muted 属性是是否静音，true为静音，false为不静音
- volume 属性是音量，范围是0-1
由于video自带的controls在不同的浏览器样式不一致，因此利用视频api自定义播放器控件，效果如下，有点丑，，，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音视频接口api</title>
<style type="text/css">
body{
padding: 100px
}
#pro{
width:600px;
height: 10px;
background: rgba(0,0,0,0.1);
position: relative;/*为得到鼠标在里面的位置，提供参考*/
}
#pro div{
width: 1px;
height: 10px;
background: dodgerblue;
}
</style>
</head>
<body>
<input type="button" value="播放" id="play" name="">
<input type="button" value="暂停" id="pause" name="">
<input type="button" value="快进5s" id="go5s" name="">
<input type="button" value="后退5s" id="back5s" name="">
<input type="button" value="静音" id="muted" name="">
<input type="button" value="提高音量" id="volumeup" name="">
<input type="button" value="减少音量" id="volumedown" name="">
<br>
<br>
播放进度
<br>
<div id="pro">
<div id="ls"></div>
</div>
<!-- video插入视频，属性基本与audio相同，poster是视频封面 -->
<video src="./file/mov.ogg" id="v" poster="./file/p.png"></video>
<script type="text/javascript">
window.onload = function(){
var v = document.getElementById("v"); //视频
var pro = document.getElementById("pro");//进度条底层
var ls = document.getElementById("ls");//进度条上层
document.getElementById("play").onclick = function(){
v.play();//开始播放视频
}
document.getElementById("pause").onclick = function(){
v.pause();
}
//快进5秒0
document.getElementById("go5s").onclick = function(){
//获得当前播放位置
var ctime = v.currentTime; //获取播放时间
// alert(ctime);
v.currentTime = ctime+5;
}
//后退5s
document.getElementById("back5s").onclick = function(){
//获得当前播放位置
var ctime = v.currentTime; //获取播放时间
// alert(ctime);
v.currentTime = ctime-5;
}
//静音
document.getElementById("muted").onclick = function(){
v.muted = !v.muted;
}
//调高音量
document.getElementById("volumeup").onclick = function(){
//获得当前音量
var curvolume = v.volume;
//赋值新的音量
var newvoluem = curvolume+0.1;
v.volume = newvoluem>1?1:newvoluem;
}
//减少音量
document.getElementById("volumedown").onclick = function(){
//获得当前音量
var curvolume = v.volume;
//赋值新的音量
var newvoluem = curvolume-0.1;
v.volume = newvoluem<=0?0:newvoluem;
}
//进度条显示视频播放位置
v.onplay= function(){
setInterval(function(){
//当前播放位置
var ctime = v.currentTime;
console.log(ctime);
//视频总长度
var alltime = v.duration;
//计算进度条长度
var lswidth = ctime/alltime*600;
console.log(lswidth);
document.getElementById("ls").style.width = lswidth+"px";
},1000)
}
//点击进度条定位视频播放
pro.onclick = function(){
var ev = window.event || e;
//获得鼠标位置
var mx = ev.layerX || offsetX;
console.log(mx);
//计算播放为值
var settime = v.duration*(mx/600);
//设置视频播放位置
v.currentTime = settime;
//设置进度条位置
ls.style.width = mx+ "px";
}
}
</script>
</body>
</html>
4. 本地存储
类似于之前的cookie，例如在京东中不同页面将不同商品加入购物车，那么在结算页面就能看到所有购物车内的商品，而加入购物车这动作是没有和后台交互的（也许有），应该就是利用了html的本地存储功能，本地存储主要有两种。
- sessionStorage 临时存储
- localStorage 永久存储
注意
*. sessionStorage 存储的数据在浏览器关闭后就清理掉
*. sessionStorage 写入数据的页面和获得数据的页面要在同一个浏览器标签中打开才可以。
*. localStorage存储的数据，多标签存储数据,即使不在一个标签打开也能获得。
*. localStorage存储的是永久数据，如果不清理浏览器缓存，无论在什么时候打开，数据都存在。
方法
对于localStorage和sessionStorage的操作方法都相同，如下：
- setItem(“key”,“value”) 写入数据
- getItem(“key”,“value”) 读出数据
- clear(); 清除所有数据
- length 属性，获得所有数据长度
sessionStorage存储效果：
sessionStorage存储演示代码-写入数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
<!--注意，必须以web服务器方式打开才行，以文件形式打开无效.
sessionStorage 存储的数据在浏览器关闭后就清理掉
sessionStorage 写入数据的页面和获得数据的页面要在**同一个浏览器标签**中打开才可以。 -->
<br>
<input type="button" id="set" value="写入数据" name="">
<script type="text/javascript">
document.getElementById("set").onclick = function(){
sessionStorage.setItem("name","刀锋战士");
}
</script>
</body>
</html>
sessionStorage存储演示代码-写入数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
<!-- 注意，必须以web服务器方式打开才行，以文件形式打开无效
sessionStorage 存储的数据在浏览器关闭后就清理掉
essionStorage 写入数据的页面和获得数据的页面要在**同一个浏览器标签**中打开才可以。 -->
<br>
<input type="button" id="set" value="读出数据" name="">
<script type="text/javascript">
document.getElementById("set").onclick = function(){
var name = sessionStorage.getItem("name");
alert(name);
}
</script>
</body>
</html>
loacalStorage存储演示效果如下：
localStorage存储演示代码-写入数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
<!--注意，必须以web服务器方式打开才行，以文件形式打开无效.
localStorage存储的数据，即使不在一个标签打开也能获得。
localStorage存储的是永久数据，如果不清理浏览器缓存，无论在什么时候打开，数据都存在。
-->
<br>
<input type="button" id="set" value="写入永久数据" name="">
<script type="text/javascript">
document.getElementById("set").onclick = function(){
localStorage.setItem("name","刀锋战士");
}
</script>
</body>
</html>
localStorage存储演示代码-写入数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
<!--注意，必须以web服务器方式打开才行，以文件形式打开无效.
localStorage存储的数据，即使不在一个标签打开也能获得。
localStorage存储的是永久数据，如果不清理浏览器缓存，无论在什么时候打开，数据都存在。
-->
<br>
<input type="button" id="set" value="读出永久local数据" name="">
<input type="button" id="del" value="删掉name数据" name="">
<input type="button" id="len" value="获取数据数量" name="">
<input type="button" id="clr" value="清理所有数据" name="">
<script type="text/javascript">
//读出数据
document.getElementById("set").onclick = function(){
var name = localStorage.getItem("name","刀锋战士");
alert(name);
}
//删掉localStorage数据
document.getElementById("del").onclick = function(){
localStorage.removeItem("name");
}
//获取数据数量
document.getElementById("len").onclick = function(){
alert(localStorage.length);
}
//清理所有数据
document.getElementById("clr").onclick = function(){
localStorage.clear();
}
</script>
</body>
</html>
本地存储的特点
- 容量大，5M-10M,目前形势就5M的考虑笔记稳妥。
- 不会随回话来传输。
- 接口丰富，读取和写入方便。
5. Canvas绘制图形
简介
<canvas>标签定义图形，比如图标和其他图像。
<canvas>标签**只是图形容器**，我必须用脚本来绘制图形
canvas其实对于HTML来说很简单，只是一个标签元素，自己没有行为，但却把一个绘图API展现给客户端Javascript以使脚本能够把想要绘制的东西都绘制到一块画布上，拥有绘制路径、矩形、圆、字符以及图像等功能，所有的标签都是图形的容器，必须使用JavaScript的API来操作绘图
标签
<canvas id="canvas" width="500" height="500"></canvas>
注意：画板canvas 的宽高不要用css来定义
绘制矩形API
- getContext(“2d”) 返回一个用于画布上2d绘图的环境
- fillStyle属性，设置填充颜色
- fillRect(100,100,500,300); 绘制实心矩形，参数分别是，距离左边，距离右边，宽度，高度
- strokeStyle 属性，设置描边颜色
- lineWidth 属性，设置描边宽度
- strokeRect(300,200,400,260); 参数同rillRect
- clearRect(220,170,200,160); 清理画布内容，参数通rillRect
绘制矩形效果如下:
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas{
background: #ccc;
display: block; /*canvas是行内块级元素*/
margin:20px auto;
}
</style>
</head>
<body>
<!-- canvas相当于一个画板 -->
<!-- 注意：画板canvas 的宽高不要用css来定义 -->
<canvas id="canvas" width="800" height="500">
</canvas>
<script type="text/javascript">
window.onload= function(){
var canvas = document.getElementById("canvas");
// 1. 获得画板上的画布环境
var cv = canvas.getContext("2d"); //获得2d的绘画环境
//2. 设置填充颜色
cv.fillStyle = "yellow";
//3. 画实心矩形
cv.fillRect(100,100,500,300);//参数分别是，距离左边，距离右边，宽度，高度
//4. 设置描边线条颜色和线条粗细
cv.strokeStyle= "pink";
cv.lineWidth = 5;
//5. 画空心矩形
cv.strokeRect(300,200,400,260);//参数通rillRect
//6. 清理画布内容
cv.clearRect(220,170,200,160);
}
</script>
</body>
</html>
绘制路径API
路径是两个点之间的轨迹
- beginPath(); 开启路径
- moveTo(30,30); 指定起点路径，参数分别是，距离左边，距离右边，下同。
- lineTo(200,30); 指定下一点，canvas是确定路径的点，在进行绘制
- closePath(); 关闭路径，将最后一点和第一点连接，形成一个封闭空间。
- lineJoin(); 指定圆角类型
- stroke(); 绘制路径
绘制路径效果：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制路径</title>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
//开启路径
cv.beginPath();
//指定路径起点
cv.moveTo(30,30);
//指定终点
cv.lineTo(100,200); //距离左边，距离上边
//再指定下一点，canvas是确定路径的点，在进行绘制
cv.lineTo(200,30);
cv.lineTo(300,200);
cv.lineTo(400,30);
cv.closePath();//关闭路径，将最后一点连接第一点，形成一个封闭路径。
//指定线条的颜色和粗细
cv.strokeStyle = "dodgerblue";
cv.lineWidth= 5;
//指定边界类型
cv.lineJoin = "round";//指定圆角
//绘制路径
cv.stroke();
//还可以填充
cv.fillStyle="yellow";
cv.fill(); //
}
</script>
</body>
</html>
canvas实现绘图画板
基础思路：鼠标按下时，获得鼠标相对于画板的位置，设为起点；设置鼠标移动事件，每次进入移动时间后，获得新的鼠标位置，作为终点，进行鼠标绘制。直到抬起鼠标，取消鼠标移动事件。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas实现画板效果</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
canvas{
background: #ccc;
display: block;
position: relative;
margin: 20px auto;
}
.tool{
width: 800px;
height: 50px;
margin: 20px auto;
}
.tool span{
margin-left:50px;
}
.tool ul{
width: 100px;
height: 30px;
border:solid 1px red;
padding: 5px;
float: right;
}
.tool ul li{
width: 50px;
height: 30px;
line-height: 30px;
float:left;
list-style:none;
}
#pen{
background:red;
}
</style>
</head>
<body>
<div class="tool">
<span>选择画笔颜色</span><input type="color" id="color" name="">
<span>选择画笔粗细</span> <input type="range" id="r" min="0" max="50" value="3"><span id="rval">3</span>
<ul>
<li id="pen">画笔</li>
<li id="earse">橡皮檫</li>
</ul>
</div>
<canvas id="canvas" width="800" height="500">
</canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.strokeStyle = "yellow";
cv.lineWidth = "3";
//鼠标按下事件
canvas.onmousedown = function(e){
//开启路径绘制
cv.beginPath();
// 获得鼠标位置
var ev = window.event || e;
var mousex = ev.layerX || ev.offsetX;
var mousey = ev.layerY || ev.offsetY;
console.log(mousex);
console.log(mousey);
//设置起点
cv.moveTo(mousex,mousey);
//加鼠标移动事件
canvas.onmousemove = function(e){
var ev = window.event || e;
var newx = ev.layerX || ev.offsetX;
var newy = ev.layerY || ev.offsetY;
console.log(newx+"--"+newy)
cv.lineTo(newx,newy);
//绘制路径
cv.stroke();
}
}
//鼠标抬起事件,取消绘图（利用清除移动事件来实现）
canvas.onmouseup = function(){
canvas.onmousemove = null;
}
//点击选择画笔
document.getElementById("pen").onclick = function(){
//改变画笔和橡皮的背景颜色
this.style.background = "red";
document.getElementById("earse").style.background = "white";
//修改canvas的线条颜色为颜色选择器的颜色
cv.strokeStyle = document.getElementById("color").value;
alert(cv.strokeStyle);
}
//点击选择橡皮
document.getElementById("earse").onclick = function(){
this.style.background = "red";
document.getElementById("pen").style.background = "white";
//修改canvas的线条颜色，橡皮其实就是把线条颜色改为背景颜色
cv.strokeStyle = "#ccc";
alert("你可以擦除了");
}
//修改画笔粗细
document.getElementById("r").onchange = function(){
console.log(this.value);
document.getElementById("rval").innerHTML = this.value;
cv.lineWidth = this.value;
}
//选择画笔颜色
document.getElementById("color").onchange = function(){
// alert(this.value);
cv.strokeStyle = this.value;
}
}
</script>
</body>
</html>
画布控制
- scale(x,y) 画布缩放，x是横向缩放倍数，y是竖向缩放倍数
- translate(x,y) 画布平移， x是向右平移，y是向下平移，当xy为负数时，方向相反。
- rotate(x) 旋转 x是旋转弧度，角度360度=2π, 弧度转换函数为:弧度 = 角度*(Math.PI/180)
注意 - 假设画布是一个长方形，旋转画布以后只是让画布上的图形进行了旋转，画布仍然保持横平竖直的长方形。
- 假设有两次旋转，第一次旋转10度，第二次旋转30度，那么第二次旋转的结果就是相对于原位置的40度。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布控制</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
//画布控制，要放在绘画之前
//画布缩放,横向1.5，竖向0.8
cv.scale(1.5,0.8);//默认为不旋转为1
//画布平移，向右50，向下50
cv.translate(50,50);
//画布旋转
cv.rotate(30*(Math.PI/180));
cv.strokeStyle = "red";
cv.lineWidth = "5";
cv.beginPath();//开始路径
cv.moveTo(40,40);//起点
cv.lineTo(200,300);//节点1
cv.lineTo(360,40);
cv.closePath();//封闭路径
cv.stroke();//绘制路径
}
</script>
</body>
</html>
绘制圆弧
- arc(距离左边，距离上边，半径，起始弧度，终止弧度[, 弧度方向]) 绘制圆弧，注意角度是以弧度来表示的，转换方式如上。弧度方向默认为false为顺时针，如果为true，那么为逆时针。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布控制</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
cv.strokeStyle = "red";
cv.lineWidth = "5";
//画圆弧
cv.arc(300,300,150,0,150*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
cv.stroke();//绘制路径
//填充
cv.fillStyle = "green";
cv.fill();
}
</script>
</body>
</html>
绘制扇形
扇形绘制是利用路径和圆弧想配合实现的，先设置路径起点到圆心，再画圆弧，最后闭合路径，填充实现扇形。
利用扇形绘制吃豆人效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制扇形</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
cv.strokeStyle = "red";
cv.lineWidth = "5";
cv.beginPath();
cv.moveTo(300,300);//设置起点
//画圆弧
cv.arc(300,300,150,-30*Math.PI/180,30*Math.PI/180,true);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度，方向，默认为false逆时针，true为顺时针。
cv.closePath();
cv.stroke();//绘制路径
//填充
cv.fillStyle = "yellow";
cv.fill();
cv.arc(500,300,30,0,2*Math.PI);
cv.fill();
cv.arc(600,300,30,0,2*Math.PI);
cv.fill();
cv.arc(700,300,30,0,2*Math.PI);
cv.fill();
}
</script>
</body>
</html>
绘制饼状图
饼状图其实就是在一个圆形上画不同的扇形，凑满360度就可以了。
效果如下：
不知道为什么不能闭合，没找到原因，，，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制扇形</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
cv.strokeStyle = "red";
cv.lineWidth = "5";
cv.beginPath();
cv.moveTo(200,200);//设置起点
//画圆弧
cv.arc(200,200,150,0,30*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
cv.closePath();//关闭路径
//填充
cv.fillStyle = "green";
cv.fill();
cv.beginPath();
cv.moveTo(200,200);//设置起点
//画圆弧
cv.arc(200,200,150,30*Math.PI/180,60*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
cv.closePath();//关闭路径
//填充
cv.fillStyle = "red";
cv.fill();
cv.beginPath();
cv.moveTo(200,200);//设置起点
//画圆弧
cv.arc(200,200,150,60*Math.PI/180,180*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
cv.closePath();//关闭路径
//填充
cv.fillStyle = "dodgerblue";
cv.fill();
cv.beginPath();
cv.moveTo(200,200);//设置起点
//画圆弧
cv.arc(200,200,150,180*Math.PI/180,260*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
cv.closePath();//关闭路径
//填充
cv.fillStyle = "pink";
cv.fill();
// ？？？为什么把圆形画完整就会覆盖前面的颜色呢？？？
// cv.beginPath();
// cv.moveTo(200,200);//设置起点
// //画圆弧
// cv.arc(200,200,150,260*Math.PI/180,3600*Math.PI/180);//参数分别是距离左边，距离上边，半径，起始弧度，终止弧度。
// cv.closePath();//关闭路径
// //填充
// cv.fillStyle = "yellow";
// cv.fill();
}
</script>
</body>
</html>
绘制文字
相关API
- context.font=“40px 黑体” 设置字体属性
- context.textAlign = “left|right|center”
- context.fillText(文字,x,y,maxWidth); 在画布上绘制实心文本
- context.strokeText(文字,x,y,maxWidth); 在画布上绘制空心文本
- context.textBaseLine = “top|middle|bottom” 设置文字基线
- context.measureText(文字) 获得文本宽度。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制文字</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
//设置字体和大小
cv.font = "30px 微软雅黑";
//设置左右文字对齐
cv.textAlign = "center"; //默认是left
//设置上下文字对齐
cv.textBaseline = "middle";//默认是top
cv.fillText("canvas绘制文字",100,100);//绘制实心文字
cv.strokeText("canvas绘制文字",100,300);//绘制空心文字
//获得文字长度
console.log(cv.measureText("canvas绘制文字"));
//显示文字基线，用于辅助显示对齐效果
cv.beginPath();
cv.moveTo(100,0);
cv.lineTo(100,500);
cv.stroke();
cv.beginPath();
cv.moveTo(0,100);
cv.lineTo(800,100);
cv.stroke();
}
</script>
</body>
</html>
绘制验证码
绘制验证码步骤如下：
- 先固定canvas宽高为200px,50px
- 写for循环写入4个随机字母
- 在for循环内给4个随机字母加上随机的位置
- 在for循环中给4个随机字母加上随机颜色
- 给4个随机字母加上随机干扰线条颜色
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制验证码</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 150px auto;
position: relative;
}
</style>
</head>
<body>
<canvas id="canvas" height="50" width="200"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
cv.fillStyle = "yellow";
cv.font= "30px arial";
var words = "QAZWSXEDCRFVTGBYHNUJMIKOLP";
for(var i = 0; i<4; i++){
//随机颜色
var r = Math.floor(Math.random()*256);//结果就是随机0-255之间的整数
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
cv.fillStyle = 'rgb('+r+','+g+','+b+')';//为啥加上加号？
//随机角度
var d = Math.floor(Math.random()*(5+1-(-5))+(-5));//公式是：生成从x-y之间的一个随机数的公式是：val = Math.floor(Math.random()*((y+1-x)+x))
cv.rotate(d*Math.PI/180);
//随机字母
var n = Math.floor(Math.random()*(words.length-1));
//随机x位置
var x = Math.floor(Math.random()*((i*50+20)+1-i*50)+i*50);//这个公式源公式哪里来的
//随机y位置
var y = Math.floor(Math.random()*(45+1-30)+30);//????
cv.fillText(words[n],x,y);
}
//随机干扰线
var startx = Math.floor(Math.random()*201);
var endx = Math.floor(Math.random()*201);
var starty = Math.floor(Math.random()*51);
var endy = Math.floor(Math.random()*51);
cv.beginPath();
cv.moveTo(startx,starty);
cv.lineTo(endx,endy);
//干扰线的随机颜色
var r = Math.floor(Math.random()*256);//结果就是随机0-255之间的整数
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
cv.fillStyle = 'rgb('+r+','+g+','+b+')';//为啥加上加号？
cv.stroke();
}
</script>
</body>
</html>
canvas绘制图片
将图片加入canvas中先得保证图片被引入到html中，同时得等图片加载完成。
- context.drawImage(“图像资源”,x,y[,宽度,高度]) 宽度高度指放入canvas后的宽高
- drawImage(“图像资源”,裁切开始x位置，裁切开始y位置，宽，高，放置到x位置，放置到y位置,放置后款，放置后高)
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制图片</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<img id='pic' src="./file/p.png" hidden>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
var pic = document.getElementById("pic");
//必须得图片载入完成后才能写入到canvas中,如果不在window.onload中那么就得在图片.onload中画图。
cv.drawImage(pic,10,10);
//除载入已有图片还可以动态载入图片
var newimg = document.createElement("img");
newimg.src = "./file/p.png";
// drawImage("图像资源",裁切开始x位置，裁切开始y位置，宽，高，放置到x位置，放置到y位置,放置后款，放置后高)
cv.drawImage(newimg,50,100,100,50,300,300,100,50);
}
</script>
</body>
</html>
canvas自定义填充
API
- cv.createPattern(pic,“repeat|repeat-x|repeat-y|no-repeat”);
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas自定义填充</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas{
display: block;
background: #ccc;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas" height="500" width="800"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
var pic = document.createElement("img");
pic.src = "./file/p.png";
pic.onload = function(){
//创建自定义填充规则
var gz = cv.createPattern(pic,"repeat");
// var gz = cv.createPattern(pic,"repeat-x");
// var gz = cv.createPattern(pic,"repeat-y");
// var gz = cv.createPattern(pic,"no-repeat");
cv.fillStyle = gz;
cv.fillRect(20,20,800,500);
}
</script>
</body>
</html>
canvas 读取和写入图像
API
- context.getImageData(位置开始x，位置开始y，宽度，高度)
- context.putImageData(图像,位置开始x，位置开始y)
没实现出来。。。。。