正文
html 基础之canvas 和 localStorage
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1，建立一个canvas 画布：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: #f00;
}
#canvas {
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>
1.2 动态创建canvas ：
<style>
#canvas {
border: 1px solid blue;
}
</style>
<script>
window.onload = function() {
var Ocanvas = document.createElement('canvas');
// Ocanvas.style.width = "300";
// Ocanvas.style.height = "200";
// Ocanvas.style.background = "red";
Ocanvas.id = "canvas";
Ocanvas.width = "300";
Ocanvas.height = "200";
Ocanvas.style.background = "red";
document.body.appendChild(Ocanvas);
}
</script>
1.3 使用canvas :画直线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas {
border: 1px solid blue;
background: white;
} body {
background: black;
}
</style>
<script>
window.onload = function() {
var Ocanvas = document.getElementById("canvas");
var Og = Ocanvas.getContext('2d'); // 获取2d 绘图环境
Og.lineWidth = 10; // 线条宽度
Og.strokeStyle = "#1133fb"; // 线条样式
Og.moveTo(100, 100); //起始点
Og.lineTo(200, 200); //结束点
Og.stroke(); // 渲染
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="250"></canvas>
</body>
</html>
1.4 canvas 作画：画圆弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas {
border: 1px solid blue;
background: white;
}
body {
background: black;
}
</style>
<script>
window.onload = function() {
var Ocanvas = document.getElementById("canvas");
var Og = Ocanvas.getContext('2d'); // 获取2d 绘图环境
//beginPath() 方法开始一条路径，或重置当前的路径。
Og.beginPath();
Og.lineWidth = 10;
Og.strokeStyle = "#aa0072";
// 画圆，第一个参数为圆心的x,第二个参数为圆心的y,第三个参数为圆的半径，第四个参数为圆的起始点，第五个参数为圆的结束点，第六个参数为画圆的方向（false为顺时针，true为逆时针）
Og.arc(150, 100, 70, 0, 2 * Math.PI / 4, false);
Og.stroke(); // 渲染
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="250"></canvas>
</body>
</html>
运行结果：
2.1 sessionStorage 基础：浏览器上的临时变量，只要不关闭，临时变量就一直存在，直到关闭浏览器。临时变量的设置：window.sessionStorage.setItem('name','值'); 获取临时变量：window.session.getItem('name')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script>
window.onload = function() {
var abtn = document.querySelectorAll("input");
var obj = {
name: "huanying2015",
sex: "man",
age: 25
}
abtn[0].onclick = function() {
// sessionStorage 存储在浏览器上的临时变量，只要不关闭浏览器，就一直存在，只要一关比浏览器，就不存在了
window.sessionStorage.setItem('name', obj['name']);
}
abtn[1].onclick = function() {
alert(window.sessionStorage.getItem('name'));
}
abtn[2].onclick = function() {
// 清除浏览器上的临时变量
window.sessionStorage.removeItem("name");
}
}
</script>
</head>
<body>
<input type="button" value="设置">
<input type="button" value="获取">
<input type="button" value="删除">
</body>
</html>
运行结果：
2.2 localStorage :永久性存储，与sessionStorage不同的是，关闭浏览器，变量的值也不会消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
var aInput = document.querySelectorAll("input");
var obj = {
name: 'huanying2015',
sex: 'man',
age: 25
}
aInput[0].onclick = function() {
window.localStorage.setItem('name', obj['name']);
window.localStorage.setItem('sex', obj['sex']);
window.localStorage.setItem('age', obj['age']);
}
aInput[1].onclick = function() {
alert(window.localStorage.getItem('name') + '------' + window.localStorage.getItem('sex') + '-------' + window.localStorage.getItem('age'));
}
aInput[2].onclick = function() {
window.localStorage.removeItem('name');
window.localStorage.removeItem('sex');
window.localStorage.removeItem('age');
}
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
</body>
</html>
运行结果：关闭浏览器之后，之前设置的变量还在，还可以直接通过window.localStorage.getItem('属性名') 来直接获取
3. localStorage 的应用：在网页中输入变量名称，关闭网页时，变量名称存储的值还在，当再次打开网页时，浏览器直接调用 localStorage 中的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script>
window.onload = function() {
var aInput = document.querySelectorAll("input");
var Otxt = document.querySelector("textarea");
if (window.localStorage.getItem('userName123')) {
aInput[0].value = window.localStorage.getItem('userName123');
}
for (var i = 0, len = aInput.length; i < len; i++) {
if (window.localStorage.getItem('sex1') == aInput[i].value) {
aInput[i].checked = true;
}
}
if (window.localStorage.getItem('shuoming')) {
Otxt.value = window.localStorage.getItem('note');
} window.onunload = function() {
if (aInput[0].value) {
window.localStorage.setItem('userName123', aInput[0].value);
}
for (var i = 0, len = aInput.length; i < len; i++) {
if (aInput[i].checked == true) {
window.localStorage.setItem('sex1', aInput[i].value);
}
}
if (Otxt.value) {
window.localStorage.setItem('shuoming', Otxt.value);
}
}
}
</script>
</head>
<body>
<p>
用户名：<input type="text">
</p>
<br>
<p>
性别：<br>
<input type="radio" name="sex1" value="男"> 男
<input type="radio" name="sex1" value="女"> 女
</p>
<p>
备注：
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
</body>
</html>
运行结果：
