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>
运行结果：
html 基础之canvas 和 localStorage的更多相关文章
- qml基础学习 Canvas画笔
一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）
1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...
- 绘图——Android绘图基础：Canvas、Paint等
Android的绘图应该继承View组件,并重写它的onDraw(Canvas canvas)方法即可. 重写onDraw(Canvas canvas)方法时涉及一个绘图API:Canvas,Canv ...
- 前端基础：canvas概述
1:并不是所有的浏览器都支持canvas,若是不支持则浏览器会弹出 <canvas>Update your browser to enjoy canvas</canvas> 浏 ...
- Unity UGUI——UI基础，Canvas
主题:画布--Canvas 内容:创建Canvas UI控件的绘制顺序 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5 ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...
- canvas绘画基础(一)：认识canvas画布
html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...
- canvas游戏开发系列（1）:基础知识
canvas基础知识 canvas是什么? canvas是html5的一个元素,可以说他的功能是html元素中最强大的一个. 举个栗子: 第一步:在页面中引入canvas标签,并且设置好宽高背景等样式 ...
随机推荐
- Android Studio启动后出现cannot bind to 127.0.0.1:5037 10048的解决办法
第一次:先连接测试手机,然后启动Android studio时出现下面的弹框,网上查找资料说是360手机助手导致的,但是发现没有安装360手机助手只有360,卸载360后再启动Android stud ...
- SCCM2012 R2实战系列之五：发现方法
打开SCCM2012的控制台 点击左侧栏的“管理”选项,然后展开“层次结构配置”,点击“发现方法”来配置客户端发现. 勾选“启用Active Directory林发现”.“发现Active Direc ...
- window.open 子窗口关闭刷新父页面
function JsMod(htmlurl,tmpWidth,tmpHeight){ htmlurl=getRandomUrl(htmlurl); var winObj = window.open( ...
- 2-自己动手写HashMap
public class Entry { // 键 private Object key; // 值 private Object value; //构造器 public Entry(Object k ...
- Webbrowser中IHTMLElement、IHTMLElement2、IHTMLDocument2、IHTMLDocument2属性介绍
一.IHTMLElement接口 ele.click -----------点击事件 ele.setAttribute(const strAttributeName: WideStri ...
- C#语言基础知识
一. string i_str = "321"; string 型,强制转换成 int 型 int i_int1 = int.parse(i_str); string 型,强制转换 ...
- string类和stringBuilder类
字符串是C#中的一种重要数据类型,在项目开发中,离不开字符串操作.C#提供了string类实现字符串操作.于Convert类相似,string类中方法有静态方法和非静态方法.注意,在C#中String ...
- 在django中使用django_debug_toolbar进行日志记录
一.概述 django_debug_toolbar 是django的第三方工具包,给django扩展了调试功能. 包括查看执行的sql语句,db查询次数,request,headers,调试概览等. ...
- GNU tar
2.tar教程 2.4.常用选项 2.5.两个选项 2.6.创建档案文档 2.7.查看档案文档内容 4.tar操作 4.1.基本操作 4.2.高级操作 4.3.“-c”的选项 链接到压缩命令 2.ta ...
- couchdb安装
fabric涉及到了couchdb做为数据库,所以单独安装一个进行测试,当然也可以使用docker来安装. 项目地址:http://couchdb.apache.org/ 这里采用windows来安装 ...