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标签,并且设置好宽高背景等样式 ...
随机推荐
- 廖雪峰Java5集合-1Java集合简介-1Java结合简介
1.集合 定义:集合就是一堆东西.集合里的东西,称为元素Element 数学中的集合: 有限集合: * 一个班所有的学生组成的集合 * 一个网站所有的商品组成的集合 无限集合: * 全体自然数集合 * ...
- 将OpenVZ系统硬盘从200G升级到400G
平时习惯性动作df了一下,结果发现...... ‘ 200G的磁盘空间快满了(99%),只剩下2G多了. 索性一下加到400G空间 目前为止很顺利. 但是OpenVZ这台需要关机再开机才行. 重新开机 ...
- java 字节码 指令集 汇编(转)
https://blog.csdn.net/github_35983163/article/details/52945845 网上找的没有指令码这列 自己把它加上 更方便查阅 指令从0x00-0xc ...
- mysql锁文章
http://www.genshuixue.com/i-cxy/p/15285416 http://blog.csdn.net/hw_libo/article/details/39080809 htt ...
- linux下的网络通信设置：openssh、PuTTY、tightVNC
OpenSSH的安装: windows上安装PuTTY: PuZZY上传文件到linux: 1.在window下的cmd中cd到PuZZY所在的文件夹下 2.使用pscp命令上传文件 3.使用psc ...
- classpath路径配置
在很多Apache的框架中,经常遇见配置classpath情况,但是都没有认真研究过classpath,下面是对classpath的解析. classpath: 是指编译过后的的classes目录 对 ...
- InfluxDB 基本认识
一.InfluxDB 简介 InfluxDB 是用Go语言编写的一个开源分布式时序.事件和指标数据库,无需外部依赖.类似的数据库有Kairosdb.OpenTsdb等. 三大特性: 时序性(Time ...
- 转 WiFi的STA和AP模式指什么？
1):AP,也就是无线接入点,是一个无线网络的创建者,是网络的中心节点.一般家庭或办公室使用的无线路由器就一个AP. 2):STA站点,每一个连接到无线网络中的终端(如笔记本电脑.PDA及其它可以联网 ...
- Spring AOP详解和实现方式
一.什么是AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善. ...
- (转)利用WPF的ListView进行大数据量异步加载
原文:http://www.cnblogs.com/scy251147/archive/2012/01/08/2305319.html 由于之前利用Winform的ListView进行大数据量加载的时 ...