JavaScript中html画布的使用与页面存储技术详解
目录
- 一、JavaScript使用html中的画布
- 二、页面存储技术
一、JavaScript使用html中的画布
1、画布：页面中用于绘制图形的特殊区域
2、绘制图形的过程
(1)创建画布：使用html5中画布标签
<canvas id="id" width="宽度" height="高度"> </canvas>
(2)JavaScript中获取画布
document.getElementById('id')
(3)准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形
getContext('2d')
3、绘图
(1)绘制线条：
A、初始位置、连线端点(终点)、描边(画线)
B、2d平面坐标系：画布的左上角是坐标原点(0,0),从原点开始向右延伸是x轴增大,向下延伸是y轴增大
C、画线过程：
a、确定初始位置(起始点)：moveTo(x,y)
b、确定连接端点(终点)：lineTo(x,y)
c、描边：stroke()
D、线条的样式
a、线宽：lineWidth =‘数值' ,默认以像素为单位
b、描边的颜色(线条颜色): strokeStyle = ‘颜色名或16进制颜色值'
c、端点的形状：lineCap = ‘形状'
- butt：默认值，无端点形状，显示的是直线的方形边缘
- round：圆形端点
- square：方形端点
E、线的路径：在同一个画布中添加再多的连线端点路径只有一条
a、开始新的路径：beginPath()
b、闭合路径：closePath()
c、路径填充：fill()
示例
ontext.strokeStyle = 'red' //描边的颜色 context.moveTo(10,10); //起始位置 context.lineTo(10,100);//连线端点(竖线) context.lineTo(100,100);//连线端点(横线) context.closePath();//闭合路径 context.stroke();//描边 context.fill(); //填充
(2)绘制圆：arc(x,y,r,开始角,结束角,方向)
x,y ：圆心的坐标 r：圆的半径
开始角：可以圆周率
结束角：同开始角相同
方向：绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认)
示例
var canvas = document.getElementById('cavs');
var context = canvas.getContext('2d');
context.arc(150,80,50,0,2.0*Math.PI)
context.stroke()
二、页面存储技术
会话跟踪技术,http协议是一个无状态协议,服务器端要确定发送请求的客户端必须使用会话跟踪技术
1、原始的存储方式（会话跟踪技术）：通过Cookie方式存储
(1)由服务器端产生，存储在客户端的浏览器缓冲区中
(2)Cookie方式的缺点
A、Cookie被附加在HTTP消息中，无形中增加了数据流量。
B、Cookie在HTTP消息中是明文传输的，所以安全性不高，容易被窃取。
C、Cookie存储于浏览器，可以被篡改，服务器接收后必须先验证数据的合法性。
D、浏览器限制Cookie的数量和大小（通常限制为50个，每个不超过4KB），对于复杂的存储需求来说是不够用的
2、Html5的页面存储方式(web storage)
(1)localStorage：持久化的本地存储。以键-值(key-value)方式进行存储，若用户或脚本程序不清除,则会 一直存储在本地计算机上
(2)sessionStorage：
A、session：会话。在web开发中，一次会话是指从浏览器打开到关闭;当浏览器关闭时会话就结束
B、sessionStorage：数据存储在浏览器的内存中,当浏览器关闭时内存中的数据会自动清除。其生命周期和会话的生命周期相同
(3)localStorage和sessionStorage的区别
A、生命周期不同：localStorage是永久性的,sessionStorage的生命周期和会话相同,会话结束数据消失
B、存储位置不同：localStorage存储在硬盘上,sessionStorage存储在浏览器内存中(浏览器缓存中)
示例：使用画布绘制火柴人
<body>
<canvas id="cas" width="1000" height="1000"></canvas>
</body>
</html>
<script>
var cas=document.getElementById('cas');
var context=cas.getContext('2d');
//绘制头部
context.arc(400,100,30,0,2*Math.PI);
context.lineWidth='5';
context.stroke();
//绘制躯干
context.beginPath();
context.moveTo(400,130);
context.lineTo(400,140);
context.lineWidth='5';
context.stroke();
context.beginPath();
context.moveTo(400,140);
context.lineTo(400,260);
context.lineWidth='25';
context.stroke();
//绘制文件夹
context.beginPath();
context.moveTo(360,200);
context.lineTo(440,200);
context.lineTo(440,250);
context.lineTo(360,250);
context.closePath();
context.fillStyle='#fff';
context.fill();
context.lineWidth='2';
context.stroke();
//绘制手臂
context.beginPath();
context.moveTo(400,140);
context.lineTo(440,200);
context.lineTo(400,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(400,240,10,0,2*Math.PI);
context.fillStyle='#000';
context.fill();
//绘制腿部
context.beginPath();
context.moveTo(380,400);
context.lineTo(400,260);
context.lineTo(420,400);
context.lineTo(400,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(365,400,15,0,1*Math.PI,true);
context.closePath();
context.lineWidth='5';
context.stroke();
context.beginPath();
context.arc(405,400,15,0,1*Math.PI,true);
context.closePath();
context.lineWidth='5';
context.stroke();
</script>
效果如图：可以通过修改参数来画出自己喜欢的各种形状
到此这篇关于JavaScript中html画布的使用与页面存储技术的文章就介绍到这了,更多相关js html画布内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m
-
JavaScript html5 canvas画布中删除一个块区域的方法
本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图中,黑色小方块即为删除掉的块区域 具体代码如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>
-
JavaScript实现存储HTML字符串示例
我是搞PHP的,让我想起了<<<语法(heredoc和nowdoc),那么就为他命名heredoc吧. 复制代码 代码如下: Function.prototype.heredoc = function(){ // 利用 function 的注释来存储字符串,而且无需转义. var _str = this.toString(), s_pos = _str.indexOf("/*")+2, e_pos = _str.lastIndexOf("*/");
-
JavaScript中html画布的使用与页面存储技术详解
目录 一.JavaScript使用html中的画布 二.页面存储技术 一.JavaScript使用html中的画布 1.画布:页面中用于绘制图形的特殊区域 2.绘制图形的过程 (1)创建画布:使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布 document.getElementById('id') (3)准备
-
JavaScript中十种一步拷贝数组的方法实例详解
JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);
-
JavaScript中style.left与offsetLeft的使用及区别详解
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. s
-
javascript 中iframe高度自适应（同域）实例详解
javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei
-
Javascript中判断一个值是否为undefined的方法详解
前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能
-
JavaScript中类型的强制转换与隐式转换详解
目录 一.隐式转换 双等号里的转换 Boolean 类型转换 "+" 与 "-" 二.强制类型转换 new String 与 ' ' 总结 一.隐式转换 以下语句的执行结果是什么? A. undefined == null B. isNaN("100") C. parseInt("1a") === 1 D. [ ] instanceof Array 答案: A. undefined == null 为 true: undefi
-
Javascript中扁平化数据结构与JSON树形结构转换详解
目录 一. 先说简单的树形结构数扁平化处理 二. 再讲将扁平化数据结构转JSON树状形结构 扩充一个知识点:for in 与 for of 的区别 : 总结 不废话,直接开干 一. 先说简单的树形结构数扁平化处理 上思想: 思想:采用递归,每个对象都有childern,只要有children属性提取出来将其放在空数组中 然后将对象的其他属性解构出来,最后将数组合并 上代码: //已知JSON树状形结构的数据data let data = [ {id:1,title:'标题1',parent_id
-
JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解
isPrototypeOf 作用:检测一个对象是否是另一个对象的原型.或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o = Object.create(p);//使用这个原型创建一个对象 p.isPrototypeOf(o);//=>true:o继承p Object.prototype.isPrototypeOf(p);//=> true p继承自Object.prototype 以上实例来自与<JavaScript权威指南&g
-
Android中使用的定时针(刷新页面请求服务器)详解
我要在程序中用到5秒请求一下数据(不建议大家这样做,我的需求是这样) 代码展示: 1.在OnCreate中创建定时针Timer //每5秒请求一次服务器 timer=new Timer(); timer.scheduleAtFixedRate(new TimerTask() { @Override public void run() { Message message=new Message(); message.what=1; handler.sendMessage(message); } }
-
JavaScript es6中var、let以及const三者区别案例详解
首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECM