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标签,并且设置好宽高背景等样式 ...
随机推荐
- jQuery 事件的命名空间简单了解
原文地址:http://www.jb51.net/article/43626.htm 用 jQuery 绑定和解绑事件监听器都是非常简单的,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名 ...
- python打包--pyinstaller打包报错
先来一段报错信息 目前打包主要涉及socket模块出现的报错 missing module named resource - imported by posix, C:\Users\Administ ...
- 大数据：Parquet文件存储格式【转】
一.Parquet的组成 Parquet仅仅是一种存储格式,它是语言.平台无关的,并且不需要和任何一种数据处理框架绑定,目前能够和Parquet适配的组件包括下面这些,可以看出基本上通常使用的查询引擎 ...
- 知识点：Navicet Mysql数据库电脑本地备份
Navicet Mysql数据库电脑本地备份 1.打开navicat客户端,连上mysql后,双击左边你想要备份的数据库.点击“计划”,再点击“新建批处理作业”. 2.双击上面的可用任务,它就 ...
- 家庭版Windows设置远程连接
家庭版Windows设置远程连接1. windows+R 打开运行,输入 regedit 打开注册表 2.依次打开路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsof ...
- 多线程Task
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- lua 安装
1:下载安装 curl -R -O http://www.lua.org/ftp/lua-5.3.0.tar.gz tar zxf lua-5.3.0.tar.gz cd lua-5.3.0 make ...
- angularjs指令中的scope
共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...
- kafka 消息系统
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...