HTML5基础
HTML5基础
了解HTML5
HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体
- 新特性：
- 取消了过时的显示效果标记
<font></font>和<center></center>... - 新语义标签的引入
- 新表单元素引入
- canvas标签（图形设计）
- 本地数据库（本地存储）
- 一些API
- 取消了过时的显示效果标记
- 好处：
- 跨平台
例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。
- 跨平台
- 缺点：
- pc端浏览器支持不是特别友好，造成用户体验不佳
新语义标签
网页布局结构标签及兼容处理
-
新标签
<header></header> <footer></footer> <article></article> <aside></aside> <nav></nav> <section></section> -
解决方案
- 第一种解决方案：
<script type="text/javascript"> document.createElement("nav"); </script>- 第二种解决方案：通过js插件
<script type="text/javascript" src="code/html5shiv.min.js"></script>- 第三种解决方案：终极解决方案
<!--[if lte IE 8]> <script type="text/javascript" src="code/html5shiv.min.js"></script> <![endif]-->
多媒体标签及属性介绍
<video></video>视频标签- 属性：controls -> 显示控制栏
- 属性：autoplay -> 自动播放
- 属性：loop -> 设置循环播放
<audio></audio>音频标签- 属性：controls -> 显示控制栏
- 属性：autoplay -> 自动播放
- 属性：loop -> 设置循环播放
- video标签支持的格式
- 多媒体标签在网页中的兼容效果方式
<video>
<source src="code/trailer.mp4">
<source src="code/trailer.ogg">
<source src="code/trailer.WebM">
</video>
新表单元素及属性签
智能表单控件
<input type="email"> 输入合法的邮箱地址
<input type="search"> 用户输入内容显示取消图标
<input type="url"> 输入合法的网址
<input type="tel"> 输入合法的电话号码
<input type="number"> 只能输入数字
<input type="range"> 滑块
<input type="color"> 拾色器
<input type="date"> 显示日期
<input type="month"> 显示月份
<input type="week"> 显示第几周
<input type="time"> 显示时间
- 案例：智能表单控件
<fieldset>
<legend>案例：智能表单控件</legend>
<form>
<table>
<tr><td>Email:</td><td><input type="email"></td></tr>
<tr><td>搜索:</td><td><input type="search"></td></tr>
<tr><td>URL:</td><td><input type="url"></td></tr>
<tr><td>电话号码:</td><td><input type="tel"></td></tr>
<tr><td>数字类型:</td><td><input type="number" min="0" max="10" step="2"></td></tr>
<tr><td>范围类型:</td><td><input type="range" min="0" max="10" step="2" value="0"></td></tr>
<tr><td>颜色类型:</td><td><input type="color"></td></tr>
<tr><td>日期类型:</td><td><input type="date"></td></tr>
<tr><td>月份类型:</td><td><input type="month"></td></tr>
<tr><td>星期类型:</td><td><input type="week"></td></tr>
<tr><td>时间类型:</td><td><input type="time"></td></tr>
<tr><td></td><td><input type="submit" value="提交按钮"></td></tr>
</table>
</form>
</fieldset>
表单属性
-
form表单
- 表单元素编组 -> fieldset元素
- 表单元素标题 -> legend元素
- 表单关联元素 -> label元素
- 自定义选项元素 -> datalist元素
-
表单属性
- autocomplete=on | off -> 输入提示自动完成
- novalidate=true | false -> 提交时是否关闭校验
- autofocus -> 自动获取焦点
- form -> 表单域外提交
- list -> 关联datalist元素
- multiple -> 实现多选效果
- placeholder -> 占位符 （提示信息）
- required -> 是否为必填项
-
案例：禁用整组表单
<section style='width: 260px;'>
<form method="post" id="outField" novalidate>
<fieldset disabled>
<legend>案例：禁用整组表单</legend>
<input type="search" autocomplete="on" placeholder="请输入内容" autofocus required>
<button type="button">搜索</button>
<br>
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female">
<br>
<input type="text" list="data" placeholder="请选择区域" multiple>
<datalist id="data">
<option value="江苏省">南京市</option>
<option value="浙江省">杭州市</option>
<option value="安徽省">合肥市</option>
<option value="河南省">郑州市</option>
<option value="四川省">成都市</option>
</datalist>
<br>
</fieldset>
</form>
<div style="margin: 0 auto;width: 100px;">
<br>
<input type='reset' form="outField" value="重置">
<input type='submit' form="outField" value="提交">
</div>
</section>
HTMl5中的API
获取页面元素及类名操作
document.querySelector("选择器")；
备注：
选择器： 可以是css中的任意一种选择器
通过该选择器只能选中第一个元素。
document.querySelectorAll("选择器");
备注：
与document.querySelector区别：
querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表;
querySelector返回的只是单独的一个元素
Dom.classList.add("类名"): 给当前dom元素添加类样式
Dom.classList.remove("类名"); 给当前dom元素移除类样式
Dom.classList.contains("类名"); 检测是否包含类样式
Dom.classList.toggle("active"); 切换类样式（有就删除，没有就添加）
data-自定义属性
data-自定义属性名 -> 在标签中，以data-自定义名称
1. 获取自定义属性 Dom.dataset 返回的是一个对象
Dom.dataset.属性名 或者 Dom.dataset[属性名]
注意：
属性名是不包含data-
驼峰命名法
2. 设置自定义属性
Dom.dataset.自定义属性名=值;
或者
Dom.dataset[自定义属性名]=值；
文件读取
- FileReader阅读器
FileReader -> 接口有3个用来读取文件方法返回结果在result中
readAsBinaryString -> 将文件读取为二进制编码
readAsText -> 将文件读取为文本
readAsDataURL -> 将文件读取为DataURL
- FileReader 提供的事件模型
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
- 案例：读取图片
<input type="file">
<script>
let fileBtn = document.querySelector('input');
fileBtn.onchange = function(){
let file = this.files[0];
// 判断后缀是否合法
let extension = file.name.substring(file.name.lastIndexOf('.'));
let images = [".jpg",".jpeg",".png",".gif",".ico"];
let flag = false;
for(let i=0;i<images.length;i++){
if(images[i] === extension){
flag = true;
break;
}
}
if(flag){
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
let img = document.createElement("img");
img.src = reader.result;
document.body.appendChild(img);
}
}else{
alert("文件类型不正确，请重新选择");
}
}
</script>
获取网络状态
- 获取当前网络状态
window.navigator.onLine 返回一个布尔值
- 网络状态事件
window.ononline
window.onoffline
获取地理定位
- 获取一次当前位置
- coords.latitude 维度
- coords.longitude 经度
window.navigator.geolocation.getCurrentPosition(success,error);
- 实时获取当前位置
window.navigator.geolocation.getCurrentPosition(success,error);
百度地图
- 百度地图的使用
* 地址 - http://developer.baidu.com/map/
* 注册百度开发者
* 如何创建应用
* 应用类型 - 服务器
* 启用服务 - 默认全部启用
* 请求校验方式 - IP白名单校验
* IP白名单 - 0.0.0.0/0
* 得到应用的秘钥 - HbUVYMUg6PwbOnXkztdgSQlQ - 使用百度地图的步骤
- HTML页面
* 引入百度地图的JS文件
http://api.map.baidu.com/api?v=2.0&ak=您的密钥
* 定义容器元素 - 用于显示百度地图 - JavaScript
* 创建百度地图的Map对象
new BMap.Map(容器的ID);
* 设置百度地图的中心和显示级别
centerAndZoom(center,zoom) - center - 设置地图的中心位置(String)
- zoom - 设置地图的显示级别(3 - 19)
- HTML页面
- 百度地图API
- 核心类
- Map
- 构造器 - new BMap.Map(容器的ID)
- 返回一个Map核心对象
- Map
- 方法
- 修改状态方法
- centerAndZoom(center,zoom)方法
- 作用 - 初始化方法(必要)
- setCenter(center)方法
- 作用 - 设置中心点
- 控件方法
- addControl(control)方法 - 添加控件
- removeControl(control)方法 - 删除控件
- 遮盖物方法
- addOverlay()方法 - 添加遮盖物
- removeOverlay()方法 - 删除遮盖物
- openInfoWindow()方法 - 打开信息窗口
- closeInfoWindow()方法 - 关闭信息窗口
- 右键菜单方法
- addContextmenu()方法 - 添加右键菜单
- removeContextMenu()方法 - 删除右键菜单
- 基础类
- Point
- 构造器 - new BMap.Point(lng,lat)
- Point
- centerAndZoom(center,zoom)方法
- 修改状态方法
- 属性
- lng - 表示经度
- lat - 表示纬度
- 控件类
- ScaleControl - 比例尺
- NavigationControl - 缩放和平移
- MapTypeControl - 地图类型
- 遮盖物类
- Marker - 标注
- InfoWindow - 信息窗口
- 右键菜单类
- ContextMenu - 自定义菜单
- MenuItem - 菜单选项
- 核心类
- 案例
<!DOCTYPE html>
<html>
<head>
<title>地图的控件展示</title>
<meta charset="utf-8" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
</head>
<body>
<div id="allmap" style="width:500px;height:500px;"></div>
<script>
let map = new BMap.Map("allmap");
map.centerAndZoom("北京",12);
/*
向地图添加比例尺
* 创建一个比例尺对象
new BMap.ScaleControl(options)
* anchor - 设置控件在地图中显示的位置
* BMAP_ANCHOR_TOP_LEFT - 左上角
* BMAP_ANCHOR_BOTTOM_LEFT - 左下角
* BMAP_ANCHOR_TOP_RIGHT - 右上角
* BMAP_ANCHOR_BOTTOM_RIGHT - 右下角
* 通过Map对象添加控件
addControl(比例尺对象);
*/
let scale = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT
});
map.addControl(scale);
/*
向地图添加缩放平移控件
* 创建缩放平移对象
new BMap.NavigationControl(options)
* anchor - 设置控件在地图中显示的位置
* BMAP_ANCHOR_TOP_LEFT - 左上角
* BMAP_ANCHOR_BOTTOM_LEFT - 左下角
* BMAP_ANCHOR_TOP_RIGHT - 右上角
* BMAP_ANCHOR_BOTTOM_RIGHT - 右下角
* type - 平移和缩放控件样式
* BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮
* BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮
* BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
* 通过Map对象添加控件
addControl(比例尺对象);
*/
let nav = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_RIGHT,
type : BMAP_NAVIGATION_CONTROL_SMALL
});
map.addControl(nav);
/*
向百度地图添加地图类型
* 创建地图类型对象
new BMap.MapTypeControl()
* 通过Map对象添加控件
addControl(比例尺对象);
*/
let type = new BMap.MapTypeControl({
anchor : BMAP_ANCHOR_TOP_LEFT
});
map.addControl(type);
</script>
</body>
</html>
本地存储
- 发展：
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。
- localStorage：
- 永久生效
- 多窗口共享
- 容量大约为20M
window.localStorage.setItem(key,value) 设置存储内容
window.localStorage.getItem(key) 获取内容
window.localStorage.removeItem(key) 删除内容
window.localStorage.clear() 清空内容
- sessionStorage：
- 生命周期为关闭当前浏览器窗口
- 可以在同一个窗口下访问
- 数据大小为5M左右
window.sessionStorage.setItem(key,value) 设置存储内容
window.sessionStorage.getItem(key) 获取内容
window.sessionStorage.removeItem(key) 删除内容
window.sessionStorage.clear() 清空内容
Web Workers
- 基本内容
- 什么是Worker?
- 是一个运行在后台的JavaScript
- 独立于HTML页面运行的一段JavaScript代码
- Worker的特点
- 同时运行几个逻辑,并不需要顺序执行
- 独立于HTML页面的循序执行
- Worker之间相对是独立的
- Worker的问题
- 不能操作页面 - 单纯的JS逻辑
- 导致也不能使用BOM
- 不能使用DOM
- 什么是Worker?
- Worker API
- 检测浏览器对Worker支持情况
- 创建Worker文件
- 创建Worker对象
- 与Worker进行通信
- onmessage事件
- postMessage()方法
- 终止Worker
- Web存储API
- Web Socket
- 扩展内容
- 主流浏览器不允许读取本地文件
- Chrome浏览器 - 直接报错
- Firefox浏览器 - 不报错,不能用
- IE浏览器 - 不报错,不能用
- 网络文件还是可以读取的
- 案例：聊天机器人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>worker双向通信</title>
<style>
#showme > p{ line-height: 12px; color: orangered; }
</style>
</head>
<body>
<input type="text" id="data">
<input type="button" id="btn" value="发送">
<div id="showme"></div>
<script>
let btn = document.querySelector("#btn");
let data = document.querySelector("#data");
let showme = document.querySelector("#showme");
let worker;
// 1. 检测浏览器是否支持Worker
if(typeof(Worker)!=="undefined"){
/*
2. 创建Worker对象
* 注意 - 指定对应Worker文件
var worker = new Worker(url);
* url - Worker文件的路径
*/
worker = new Worker("worker_d.js");
/*
3. 绑定onmessage事件
* 注意
* 将onmessage事件绑定在Worker对象
* 触发
* Worker文件调用postMessage()方法时
* 处理函数
* 具有形参允许接收postMessage()方法传递的数据内容
*/
worker.postMessage("success");
worker.onmessage = myMessage;
}else{
showme.innerHTML = "此浏览器不支持worker，请更换浏览器运行！"
}
function myMessage(event){
showme.innerHTML += event.data + "<br>";
console.log(event.data);
}
btn.onclick = function(){
let value = data.value;
showme.innerHTML += "<p>我："+value+"</p>";
worker.postMessage(value);
data.value = "";
}
</script>
</body>
</html>
onmessage = function(event){
let message = event.data;
if(message === "success"){
postMessage("小麦：你好，我是小麦！");
}else if(message.indexOf("我是") >= 0){
postMessage("小麦：很高兴认识你！");
}else if(message.indexOf("你是") >= 0){
postMessage("小麦：我是智障！");
}else if(message.indexOf("对象") >= 0){
postMessage("小麦：我没对象，不要跟我说话！");
}else if(message.indexOf("智障") >= 0){
postMessage("小麦：智障青年欢乐多！");
}else if(message.indexOf("游戏") >= 0){
postMessage("小麦：我是不跟智障玩游戏的！");
}else if(message.indexOf("吗") >= 0){
postMessage("小麦：你问我，我可是会脸红的！");
}else if(message.indexOf("？") >= 0){
postMessage("小麦：我不跟你说话，我想静静！");
}else if(message.indexOf("滚") >= 0){
postMessage("小麦：只有球才会滚，我不会！");
}else if(message.indexOf("会") >= 0){
postMessage("小麦：你会的我都不会，你不会的我就更不会了！");
}else if(message.indexOf("啥") >= 0){
postMessage("小麦：没啥，我就是偷着乐呵了！");
}
};
操作多媒体
Canvas画布
绘图工具
- 介绍canvas画布
<canvas width="400" height="400">
<p>此浏览器不支持canvas元素！</p>
</canvas>
- 设置画布大小： 使用属性方式设置
<canvas width="400" height="400"></canvas>
- 解决画布重绘问题
- 设置一次描边 -> ctx.stroke(); -> 只执行一次
- 开启新的图层 -> ctx.beginPath(); -> ctx.closePath();
绘图方法
ctx.moveTo(x,y); 落笔
ctx.lineTo(x,y); 连线
ctx.stroke(); 描边
ctx.beginPath(); 开启新的图层
☞ 颜色： strokeStyle="值"
☞ 线宽： linewidth="值" 备注：不需要带单位
☞ 线连接方式： lineJoin: round | bevel | miter (默认)
☞ 线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square
ctx.closePath(); 闭合路径
- 案例：绘制一条直线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画布</title>
</head>
<body>
<canvas width="600px" height="400px"></canvas>
<script>
// 获取canvas画布对象
let canvas = document.querySelector("canvas");
// 获取canvas画笔对象
let ctx = canvas.getContext("2d");
// 落笔
ctx.moveTo(100, 200);
// 走线
ctx.lineTo(300, 200);
// 描边渲染
ctx.stroke();
// 开始绘制
ctx.beginPath();
// 落笔
ctx.moveTo(100, 150);
// 走线
ctx.lineTo(300, 150);
ctx.lineTo(300, 50);
ctx.lineTo(100, 150);
// 设置线的颜色为red
ctx.strokeStyle = "red";
// 设置线的宽度为20
ctx.lineWidth = "8";
// 设置线帽
ctx.lineCap = "round";
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
渐变方案
- 线性渐变
let grd = ctx.createLinearGradient(x0,y0,x1,y1);
x0 --> 渐变开始的x坐标
y0 --> 渐变开始的y坐标
x1 --> 渐变结束的x坐标
y1 --> 渐变结束的y坐标
grd.addColorStop(0,"black"); 设置渐变的开始颜色
grd.addColorStop(0.5,"yellow"); 设置渐变的中间颜色
grd.addColorStop(1,"red"); 设置渐变的结束颜色
ctx.strokeStyle=grd;
ctx.stroke();
备注：
addColorStop(offse,color);
中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。
中间可以设置任何小数
- 径向渐变
let grd = ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
(x0,y0) --> 渐变的开始圆的 x,y 坐标
r0 --> 开始圆的半径
(x1,y1) --> 渐变的开始圆的 x,y 坐标
r1 --> 开始圆的半径
填充效果
ctx.fill(); 设置填充渲染
ctx.fillstyle="值"; 设置填充颜色
非零环绕原则
- 非零环绕原则：
- 任意找一点，越简单越好
- 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）
- 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。
- 非零区域填充
- 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非零环绕原则</title>
<style type="text/css">
canvas { border: 1px solid red; }
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
//获取canvas画布对象
let canvas =document.querySelector("canvas");
//获取绘图上下文
let ctx=canvas.getContext("2d");
//绘制一个300*300矩形
ctx.moveTo(150, 50);
ctx.lineTo(450, 50);
ctx.lineTo(450, 350);
ctx.lineTo(150, 350);
ctx.lineTo(150, 50);
//开始绘制图形
ctx.moveTo(300, 100);
ctx.lineTo(200, 200);
ctx.lineTo(250, 200);
ctx.lineTo(250, 300);
ctx.lineTo(350, 300);
ctx.lineTo(350, 200);
ctx.lineTo(400, 200);
ctx.lineTo(300, 100);
ctx.fill();
</script>
</body>
</html>
绘制虚线
- 原理：设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系
- 例如： [10,10] 实线部分10px 空白部分10px
- 例如： [10,5] 实线部分10px 空白部分5px
- 例如： [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px....
- 注意：如果要将虚线改为实线，只要将数组改为空数组即可。
绘制：
ctx.setLineDash(数组);
ctx.stroke();
例如：
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
绘制动画效果
☞ 绘制一个描边矩形：
content.strokeRect(x,y,width,height);
☞ 绘制一个填充矩形：
content.fillRect(x,y,width,height);
☞ 清除：
content.clearRect(x,y,width,height);
- 实现动画效果：
- 先清屏
- 绘制图形
- 处理变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画矩形</title>
<style>
section { margin: 0 auto; width: 600px; }
canvas { border: 1px solid red; }
</style>
</head>
<body>
<section>
<canvas width="600" height="400"></canvas>
</section>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let x = 0;
let step = 5;
let i = 1;
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(x,100,100,200);
x += step * i;
if(x > canvas.width-100){
i = -1;
}else if(x < 0){
i = 1;
}
},20)
</script>
</body>
</html>
绘制文本
☞ 绘制填充文本:
content.fillText(文本的内容,x,y);
☞ 绘制镂空文本
content.strokeText();
☞ 设置文字大小：
content.font="20px 微软雅黑";
备注： 该属性设置文字大小，必须按照cssfont属性的方式设置
☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】
content.textalign="left | right | center";
☞ 文字垂直对齐方式：
content.textBaseline="top | middle | bottom | alphabetic(默认)";
☞ 文字阴影效果：
ctx.shadowColor="red"; 设置文字阴影的颜色
ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量
ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量
ctx.shadowBlur=值; 设置文字阴影的模糊度
绘制图片
☞ 将图片绘制到画布的指定位置：
content.drawImage(图片对象,x,y);
☞ 将图片绘制到指定区域大小的位置：
content.drawImage(图片对象,x,y,width,height);
备注：x与y指的是矩形区域的位置，width和height指的是矩形区域的大小
☞ 将图片的指定区域绘制到指定矩形区域内：
context.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
备注：sx与sy 指的是要从图片哪块区域开始绘制
swidth与sheight 指的是截取图片区域的大小
dx与dy 是指矩形区域的位置
dwidth与dheight 是指矩形区域的大小
☞ 解决图片绘制到某一个区域的按原比例缩放绘制：
绘制宽：绘制高==原始宽：原始高
绘制圆弧
☞ content.arc(x,y,radius,startradian,endradian[,direct]);
x,y 圆心的坐标
radius 半径
startradian 开始弧度
endradian 结束弧度
direct 方向（顺时针 false 默认）（逆时针 true）
☞ 0度角在哪？
以圆心为中心向右为0角 顺时针为正，逆时针为负
☞ 角度和弧度的关系：角度:弧度= 180:pi
特殊值： 0度 = 0弧度
30度 = π/6 (180度的六分之一)
45度 = π/4
60度 = π/3
90度 = π/2
180度 = π
360度 = 2π
☞ 绘制圆上任意点：
公式： x=ox+r*cos( 弧度 )
y=oy+r*sin( 弧度 )
ox: 圆心的横坐标
oy: 圆心的纵坐标
r: 圆的半径
平移【坐标系圆点的平移】
ctx.translate(x,y);
- 特点：通过该方法可以将原点的位置进行重新设置。
- 注意：
- translate(x,y) 中不能设置一个值
- 与moveTo(x,y) 的区别：
- 1moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变;
- translate(x,y) 是将坐标系中的原点位置发生改变
旋转【坐标系旋转】
ctx.rotate(弧度)
- 案例：画布中心旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布中心旋转</title>
<style>
canvas{ background-color: #e2fdfa; }
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.translate(canvas.width/2,canvas.height/2);
context.rotate(30*Math.PI/180);
context.fillRect(-50,-50,100,100);
setInterval(function(){
context.clearRect(-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);
context.rotate(10*Math.PI/180);
context.fillRect(-50,-50,100,100);
},100);
</script>
</body>
</html>
伸缩
ctx.scale(x,y)
- 沿着x轴和y轴缩放，x,y 为倍数 例如： 0.5 1
