<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 知识点总结</title>
<script type="text/javascript">
function draw(){
//使用JavaScript的getElementById获取DOM的canvas元素(element).
var canvas=document.getElementById("myCanvas");
if (canvas.getContext){ //测试是否能获取canvas的getContext方法.
var ctx=canvas.getContext('2d'); //创建2D context对象.
ctx.fillStyle="#FF0000"; //预先定义好图形的样式，指定图形的颜色为红色
ctx.fillRect(0,0,150,75) //绘制矩形且指定绘制方向和大小
//矩形的起始点坐标(x,y),宽和高
ctx.fillStyle="rgba(0,0,200,0.5)"; //矩形颜色为半透明的蓝色
ctx.fillRect(50,30,150,75)
}
}
if(typeof(Storage)=="undefined")
{
alert("您的浏览器不支持Web Storage")
}else{
//localStorage 及 sessionStorage程序代码
}
</script>
<style type="text/css"> <!--边框默认为宽为300像素，高为150像素-->
canvas{border:1px solid black;}
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
<!--
JavaScript代码放在<head></head>标记中：显示网页时就运行JavaScript程序
JavaScript代码放在<bady></bady>标记中：按照网页加载顺序显示
-->
<!--W3C发布了一套HTML与XML文件使用的API，称之为标准对象模型(Document Object Model,DOM)，
它定义了网页文件结构(representation)，这个阶梯以window为顶层，window内还包含许多其他的对象。
只要通过id,name属性或form[],images[]等对象集合就能取得对象，并且使用各自的属性。-->
<!--
例如，想要利用JavaScript在网页文件中显示"欢迎光临"字样，网页文件本身的对象是document,它是window的下层：
window.document.write("欢迎光临")
因为JavaScript程序代码与对象在同一页，所以window可以省略不写。-->
<!--
网页上的一举一动JavaScript都可以检测到，这种举动在JavaScript的定义中称为"事件(event)"。
"事件(event)"是用户的操作或系统发出的信号。
举例来说，当用户单击鼠标键、提交表单或当浏览器加载网页时，这些操作会产生特定的事件，因此可以用特定的程序来处理此事件。
这种工作模式就叫事件处理(Event Handling)，而负责处理事件的过程就称为事件处理过程(Event Handler)。-->
<!--addEventListener()函数是用来注册事件的处理函数-->
<!--
JavaScript常用的事件处理过程：onClick鼠标单击对象时 onMouseOver鼠标经过对象时 onMouseOut鼠标离开对象时
onLoad网页载入时 onUnload离开网页时 onReset重置表单时 onSubmit提交表单时-->
<!--
HTML文件中的每个标记(tag)都可视为一个对象，DOM就像HTML文件的对象架构图，
利用JavaScript可以取得DOM中的元素(element)或节点(node),例如，<body>就是HTML文件中的一个元素。
想要用JavaScript取得HTML文件中的元素，可以采用getElementById方法，首先必须指定组件的id值：
<canvas id="myCanvas"></canvas> document.getElementById('myCanvas')-->
<!--绘制各种图形：
01.开始新路径：beginPath()开始新路径
02.设置路径：moveTo(x,y),lineTo(x,y),arc(x,y,r,startAngle,endAngle,antiClockwise),fillRect()
03将路径头尾相连：closePath()关闭路径
04.将路径绘制到canvas绘图区：Stroke()绘制边框,Fill()填充图形-->
<!--指定图形颜色：
1.以颜色名称来表示：fillStyle="red"
2.以颜色代码(HEX码)：fillStyle="#FF0000"
3.以RGBA来表示：rgba(red,green,blue,alpha)
ColorPicker网页：http://www.pagetutor.com/colorpicker/picker2/index.html
ColorPic软件工具：http://www.iconico.com/colorpic/-->
<!--
lineWidth()属性是的线条宽度(单位是像素(pixel))：context.lineWidth="10"
lineCap()属性指定线条的端点样式(butt,round,square)：context.lineCap="butt"-->
<!--线性渐变:
var my_gradient=context.createLinearGradient(0,0,0,170) //声明Linear Gradient对象
<xS,yS>是渐变起点的坐标，<xE,yE>是渐变终点的坐标。
my_gradient.addColorStop(0,"#ff0000"); //gradient.addColorStop(stop,color)设置渐变颜色
stop用来设置渐变色的位置，其值必须介于0.0~1.0。绘制多色渐变，依次增加addColorStop()方法。
my_gradient.addColorStop(0,"#ffelff");
context.fillStyle=my_gradient //将渐变色指定给fillStyle
-->
<!--圆形渐变：
context.createRadialGradient(xS,yS,rS,xE,yE,rE)
//前3个参数定义渐变起点的坐标(xS,yS)和半径rS
//后3个参数定义渐变终点的坐标(xE,yE)和半径rE
-->
<!--
<canvas>标记只有两个属性，width和height。
lineTo()是绘制直线的方法。
绘制圆形及圆弧都是用arc()方法。
矩形的绘制方法是fillRect()。
fillStyle属性用来指定图形的填充颜色；strokeStyle属性用来指定边框颜色。
想要清除绘图区内的图形，可以用clearRect()方法。
-->
<!--Web Storage类型：
localStorage:执行删除命令才会消失。
sessionStorage:浏览器窗口或分页(tab)关闭就会消失。
-->
<!--访问localStorage:前面的"window"可以省略不写
1.Storage对象的setItem和getItem方法:
window.localStorage.setItem("userdata","Hello!HTML5")
var value1=window.localStorage.getItem("userdata")
2.数据索引：
存储语法：window.localStorage["userdata"]="Hello!HTML5";
读取语法：var value=window.localStorage["userdata"]
3.属性：
存储语法：window.localStorage.userdata="Hello!HTML5";
读取语法：var value=window.localStorage.userdata
-->
<!--删除localStorage:
删除某一条localStorage数据：
window.localStorage.removeItem("userdata");
delete window.localStorage.userdata
delete window.localStorage["userdata"]
删除localStorage全部数据：
localStorage.clear();
-->
<!--访问sessionStorage:
1.存储：window.sessionStorage.setItem("userdata","Hello!HTML5");
window.sessionStorage["userdata"]="Hello!HTML5";
window.sessionStorage.userdata="Hello!HTML5";
2.读取：var value1=window.sessionStorage.getItem("userdata");
var value1=window.sessionStorage["userdata"];
var value1=window.sessionStorage.getItem.userdata;
3.清除：window.sessionStorage.removeItem("userdata");
delete window.sessionStorage.userdata;
delete window.sessionStorage["userdata"];
sessionStorage.clear();
-->
</body>
</html>
