canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
/* 画布不能用css设置宽和高 */
/* width: 800px;
height: 800px; */
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 画布 -->
<!-- 可以用属性设置宽高 -->
<canvas id="mcanvas" width="800" height="800">
</canvas>
<script>
// 第一步:获得上下文(笔) =>canvasElem.getContext('2d');
// 第二步:开始路径规划 =>cxt.beginPath();
// 第三步:移动起始点 =>cxt.moveTo(x, y);
// 第四步:绘制线(线条、矩形、圆形、图片...) =>cxt.lineTo(x, y);
// 第五步:闭合路径 =>cxt.closePath();
// 第六步:绘制描边 =>cxt.stroke();
// 获取画布
var mcanvas = document.querySelector("#mcanvas");
// 也可以用js设置宽高
// mcanvas.width = 800;
// mcanvas.height = 800;
// 创建画笔
var cxt = mcanvas.getContext('2d');
// 开始路径规划
cxt.beginPath();
// 作画起点
cxt.moveTo(200, 200);
// 作画
// cxt.lineTo(400, 200);
// cxt.lineTo(400, 400);
// 画矩形
cxt.rect(200, 200, 200, 200);
// 路径闭合
cxt.closePath();
// 规定画笔颜色
cxt.strokeStyle = "red";
// 规定画笔粗细
cxt.lineWidth = 5;
// 绘制描边
cxt.stroke();
// 颜色填充
cxt.fillStyle = "orange";
cxt.fill();
cxt.beginPath();
cxt.moveTo(600, 600);
cxt.lineTo(600, 700);
cxt.strokeStyle = "skyblue";
cxt.stroke();
</script>
</body>
</html>
将图片画到画布上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="mcanvas" width="800" height="800"></canvas>
<script>
var mcanvas = document.querySelector("#mcanvas");
// img DOM对象
// 创建dom对象
var pic = document.createElement("img");
pic.src = "./image/cat.jpg";
var cxt = mcanvas.getContext('2d');
// 等待图片完全加载完毕再将图片画到画布上
pic.onload = function () {
// cxt.drawImage(pic, 0, 0);
// cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
cxt.drawImage(pic, 200, 200, 200, 200, 0, 0, 100, 100);
//参数说明:
//sx,sy 裁剪的左上角坐标,
//swidth:裁剪图片的宽度。 sheight:裁剪的高度
}
</script>
</body>
</html>
Location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" name="username">
<input type="submit">
</form>
<a href="#">点击</a>
<script>
console.log(location);
// 返回完整的url
console.log(location.href);
// 返回从 # 开始的 url
console.log(location.hash);
console.log(location.search);
document.querySelector("a").onclick = function(){
location.href = "./将图片画到画布上.html";
// location.assign("./canvas.html");
// location.replace("./canvas.html")
// location.reload();
}
</script>
</body>
</html>
Navigator对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <a href="#">点击</a> -->
<script>
console.log(navigator.userAgent);
// navigator.userAgent.match() // 判断用户使用哪个中断打开的页面
// if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// window.location.href = "https://www.taobao.com"; //跳转到手机端的页面
// } else {
// window.location.href = "https://www.qq.com"; //跳转到pc端的页面
// }
console.log(navigator.onLine);
</script>
</body>
</html>
map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#map {
width: 800px;
height: 800px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Zzdk2JECCqz5b1LxxjvU8RNO60zJERtq">
</script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="map"></div>
<script>
var map = new BMapGL.Map("map");
var point = new BMapGL.Point(113.62, 34.75);
map.centerAndZoom(point, 15);
var opts = {
anchor: BMAP_ANCHOR_TOP_LEFT
}
var scaleCtrl = new BMapGL.ScaleControl(opts); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
// var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
// map.addControl(cityCtrl);
// 创建地图
function initMap() {
// 1.
setMap();
setContorl();
}
// 初始化地图
function setMap() {
var point = new BMapGL.Point(113.62, 34.75);
map.centerAndZoom(point, 15);
}
// 添加控件
function setContorl() {
var opts = {
anchor: BMAP_ANCHOR_TOP_LEFT
}
var scaleCtrl = new BMapGL.ScaleControl(opts); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
// var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
// map.addControl(cityCtrl);
}
// 获取map
var map = new BMapGL.Map("map");
initMap();
</script>
</body>
</html>
History对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./canvas.html">点击1</a>
<a href="./将图片画到画布上.html">点击2</a>
<p>前进</p>
<script>
console.log(history);
document.querySelector("p").onclick = function () {
// history.back();
// history.forward();
history.go(0);
}
</script>
</body>
</html>
file对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="getFile">
<p>
<img src="" alt="">
</p>
<script>
var btn = document.querySelector("#getFile");
var img = document.querySelector("img");
// 实例化文件读取对象
var reader = new FileReader();
console.log(reader);
// 内容改变事件
btn.onchange = function () {
console.dir(btn);
console.log(btn.files[0]);
// 读取文件
// reader.readAsDataURL(btn.files[0]);
reader.readAsDataURL(btn.files[0]);
// 等待读取完成
reader.onload = function () {
// base64 编码
console.log(reader.result);
img.src = reader.result;
}
}
</script>
</body>
</html>
本地存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// localStorage 永久存储
console.log(localStorage);
// sessionStorage 临时存储
console.log(sessionStorage);
var obj = {
name: "wangwu",
age: 30
}
// 对象转字符串 json字符串 JSON.stringify()
var str = JSON.stringify(obj);
console.log(str);
// setItem()
localStorage.setItem("name2", "lisi");
localStorage.setItem("age2", 20);
localStorage.setItem("obj", str);
console.log(localStorage);
// getItem()
console.log(localStorage.getItem("name2"));
console.log(localStorage.getItem("age2"));
// 将 JSON 字符串转为对象 JSON.parse()
var newstr = localStorage.getItem("obj");
console.log(JSON.parse(newstr));
// console.log(localStorage.getItem("obj"));
// 删除
// localStorage.removeItem("name2")
// 清空
// localStorage.clear();
// localStorage
// 1.永久存储
// 2.存储空间一般为 5MB
// 3.作用域 多窗口可共享
// sessionStorage
// 1.关闭窗口内容清空
// 2.存储空间 5MB
// 3.作用域 本窗口可共享
</script>
</body>
</html>