简单的JavaScript和HTML5画布
第一部分、简单的JavaScript
1.脚本语言
在设计之初，
JavaScript
是一种可以嵌入到网页中的
脚本语言
，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的
动态应用
，在网页上随处可见。
2.应用效果
（1）验证用户输入的内容
（2）网页动态效果
（3）窗口的应用
（4）文字特效
3.JavaScript的引入
（1）行内嵌入式
行内式
是将
JavaScript代码
作为
HTML标签
的属性值使用。
<a href="Javascript:alert('欢迎来到西邮')">西安邮电大学</a>
alert()：是一个函数,作用是弹出一个消息提示框
<button οnclick="alert('欢迎来到湘潭大学')">湘潭大学</button>
onclick：表示当用户点击按钮时
（2）页面嵌入式
在HTML中运用
<script>
标签及其相关属性可以嵌入JavaScript脚本代码。
<head>
<script type="text/javascript">
// 此处为JavaScript代码
</script>
</head>
（3）外部链接式（推荐使用）
外链式
是将所有的
JavaScript代码
放在一个或多个
以.js为扩展名
的外部
JavaScript文件
中，通过
<src >
标签将这些
JavaScript文件
链接到
HTML
文档中。
<script type="text/Javascript" src="脚本文件路径" ></script>
外部链接式的优势
：
- 利于后期的修改和维护。
- 减轻文件体积，加快页面加载速度。
4.变量
在
程序运行期间
，随时可能产生一些
临时数据
，应用程序会将这些数据保存在一些
内存单元
中。
变量
就是指程序中一个已经命名的
存储单元
，它的主要作用就是为
数据操作
提供
存放信息的容器
。
（1）变量的命名规则
- 必须以字母或下划线开头，中间可以是数字、字母或者下划线。
- 变量名不能包含空格、加、减等符号。
- 不能使用JavaScript中的关键字作为变量名，如var int。
- JavaScript的变量名严格区分大小写，如UserName与username代表两个不同的变量。
（2）变量的声明
所有的
JavaScript变量
都由关键字
var
声明。
var 变量名;
（3）变量声明要遵守的规则
-
可以使用一个关键字var同时声明多个变量
。
var a,b,c //同时声明a、b和c三个变量
-
可以在声明变量的同时对其赋值，即初始化
。
var a=1,b=2,c=3； //同时声明a、b和c三个变量，并分别对其进行初始化
-
var语句可以用作for循环和for/in循
环的一部分
。
for(var i=0;i<10;i++){
}
-
使用var语句多次声明同一个变量，
就相当于对变量的重新赋值
。
5.document对象
如果我们想要在
JavaScript
中操作某个标签，首先要获取该标签的属性。在
JavaScript
中通过
document
对象及其方法可以获取标签属性，如
id
、
name
和
class
等属性。
| 方法 | 说明 |
|---|---|
| document.getElementById() | 返回对拥有指定id名的第一个对象的引用（简单理解为获取指定id名的标签） |
| document.getElementsByName() | 返回带有指定name属性名的对象集合（简单理解为获取指定name名的标签） |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合（简单理解为获取标签名） |
| document.getElementsByClassName() | 返回带有指定类名的对象集合（简单理解为获取指定class名的标签） |
第二部分、HTML5画布
1.认识画布
在网页中，我们把用于
绘制图形的特殊区域
称为“
画布
”，网页设计师可以在该区域义绘制自定的图形样式。
2.创建画布
<canvas id="画布名称" width="数值" height="数值">
</canvas>
3.获取画布
要想在
JavaScript
中控制画布，首先要获取画布。使用
getElementById()方法
可以获取网页中的画布对象。
var canvas = document.getElementById('cavs');
4.获取画笔
有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是
context
对象。
context
对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。
canvas.getContext('2d');
在JavaScript中，我们通常会定义一个变量来保存获取的context对象。
var context = canvas.getContext('2d');
5.画直线
（1）确定初识位置
在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
var cas = document.getElementById('cas');
var context = cas.getContext('2d');
context.moveTo(100,100);
（2）连接端点
连线端点
用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用
lineTo(x,y)方法
来定义连线端点。
context。lineTo(100,100);
（3）描边
通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的
stroke()方法
，可以实现线的可视效果。
context.stroke();
6.线的样式
（1）宽度
使用画布中的
lineWidth属性
可以定义线的宽度，该属性的取值为数值（不带单位），以
像素
为计量。
context.lineWidth='10';
（2）描边的颜色
使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。
context.strokeStyle=’#f00’;
context.strokeStyle=‘red’;
（3）端点的形状
默认情况下，线的端点是方形的，通过画布中的
lineCap属性
可以改变端点的形状。
7.线的路径
（1）重置路径
在同一画布中，我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径，就需要使用
beginPath()方法
，当出现
beginPath()
即表示路径重新开始。
（2）闭合路径
闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用
closePath()方法
闭合路径。
8.填充路径
使用画布中的
fill()方法
填充图形。
fill(); //填充图形
fillStyle="颜色" //设置填充色
绘制圆
在画布中，使用
arc()方法
可以绘制圆或弧线。
