目录
第十章：画布（一）
创建canvas
canvas简介
canvas元素用于绘制图形，它只是一块无色透明的图形容器区域，需要用JavaScript脚本来完成绘画。
画布是一个空白矩形区域，可以控制其每一像素。
创建canvas
<canvas id="canvas" width="" height=""></canvas>canvas的默认大小是300*150；设置canvas的宽、高时，不推荐使用px后缀。
getContext()方法
使用<canvas>元素，首先需要调用的方法；
getContext()返回一个对象，提供了用于在画布上绘图的方法和属性。context被称为绘图环境对象，包含绘图的上下文环境。
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");（该方法可以接受两个值：2d和3d，表示二维和三维）
在canvas中绘制图形的步骤
<body>
<canvas id="canvas" width="" height=""></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//使用JavaScript进行绘制
</script>绘制直线、多边形
canvas坐标及方法
canvas是一个二维网格；坐标原点(0,0)位于canvas左上角，x轴水平向右延申，y轴垂直向下延申。
路径和描绘
moveTo(x,y)
用于创建新的子路径，并规定其起始点为（x,y）。
lineTo(x,y)
为当前路径添加一条直线，这条直线从当前点开始，到（x，y）结束，此后当前点更新为（x，y）
stroke()
绘制路径，默认颜色为黑色。
线条绘制
context.moveTo(100,100);//只设置起点并不画线
context.lineTo(300,300);//若没有moveTo()规定起点，则lineTo()等同moveTo()
//起点改变为lineTo(x,y)中的坐标。
context.stroke();canvas是基于路径的绘图。
线条样式设置
lineWidth属性
设置线条宽度，单位像素；
context.lineWidth=5;strokeStyle属性
设置描边的颜色；
context.strokeStyle="red";填充
fill()方法
填充绘图，默认颜色是黑色；
若路径未关闭，则fill()方法自动从路径结束点到开始点间添加一条线，以关闭该路径，然后填充颜色。
fillStyle属性
设置填充绘画的颜色；
context.fillStyle="red";路径封闭
beginPath()
开始一条新的路径（路径开始点）
closePath()
创建从当前点到开始点的路径（路径结束点）；
关闭一条打开的子路径。
canvas中只能有一条路径存在，称为“当前路径”
绘制弧和圆
弧/曲线
arc()方法创建圆或部分圆
context.arc(x,y,r,sAngle,eAngle,anticlockwise);参数：
x：圆中心x坐标；
y：圆中心y坐标；
r：圆的半径；
sAngle：起始角，以弧度计；
eAngle：结束角，以弧度计；
anticlockwise：可选，是否按照逆时针方向绘图，false=顺时针。
绘制弧线
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="#005588";
context.arc(300,300,200,0,1.5*Math.PI);
context.stroke();绘制矩形
矩形
rect()方法绘制矩形
context.rect(x,y,width,height);
参数：
x，y指定矩形左上角的位置；
width，height指定矩形尺寸；
与fill()和stroke()搭配使用。
矩形相关方法
fillRect();
绘制“已填色”的矩形（实心）；
strokeRect();
绘制不填色的矩形（空心）；
clearRect();
清空给定矩形内的指定像素。
透明度
透明度
globalAlpha属性
设置或返回绘图的当前透明值。
context.globalAlpha=0.5;
context.fillStyle="rgb(0,0,0)";
