目录
一、画布的定义
二、画布的使用
1.创建画布
2.获取画布
3.获取画笔
三、画直线
1.初始位置
2.连接端点
3.描边
4.线的样式
(1)宽度
(2)颜色
(3)端点的形状
四、线的路径
1.重置路径
2. 闭合路径
五、图形填充
六、绘制圆
一、画布的定义
说到画布，其实大家并不陌生，在美术课上，我们可以用画笔在画布上绘画和涂鸦。在网页中，我们把用于绘制图形的特殊区域也称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。
二、画布的使用
1.创建画布
使用HTML5中的canvas标签可以在网页中创建画布。
<canvas id="画布的名称" width="宽度" height="高度">
</canvas>
2.获取画布
要想在JavaScript中控制画布，首先要获取画布。使用getElementByld()方法可以获取网页中的画布对象。
var cas = document.getElementById("画布的名称")
3.获取画笔
有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。
var ctx = cas.getContext('2d');
三、画直线
一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。
1.初始位置
在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
moveTo(x,y) //把初始位置移动到(x,y)位置
2.连接端点
连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。
lineTo(x,y) //终点在(x,y)位置
3.描边
通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke)方法，可以实现线的可视效果。
stroke()
4.线的样式
(1)宽度
使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位)，以像素为计量。
context.lineWidth='10";
(2)颜色
使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。
context.strokeStyle="#f00";context.strokeStyle='red';
(3)端点的形状
默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
lineCap=’属性值’
属性值 显示效果 butt 无形状,方形的边缘 默认值 round 圆形端点 square 方形端点
举例：
<body>
<!-- 创建画布 -->
<canvas id="cas" width="200" height="200"></canvas>
<script type="text/javascript">
//1、获取画布
var cas = document.getElementById('cas');
//2、获取画笔
var ctx = cas.getContext('2d');
//3、确定起始点
ctx.moveTo(10,10);
//4、确定连接端点(终点)
ctx.lineTo(125,100);
ctx.lineWidth = '10'; //设置线宽
//5.描边
ctx.strokeStyle = '#0f0'; //描边的颜色
ctx.lineCap = 'square'; //线条端点的形状
ctx.stroke();
</script>
</body>效果图：
四、线的路径
1.重置路径
在同一画布中，我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。
举例：
<body>
<!-- 创建画布 -->
<canvas id="cas" width="200" height="200"></canvas>
<script type="text/javascript">
//1、获取画布
var cas = document.getElementById('cas');
//2、获取画笔
var ctx = cas.getContext('2d');
//3、确定起始点
ctx.moveTo(10,10);
//4、确定连接端点(终点)
ctx.lineTo(125,100);
ctx.lineWidth = '10'; //设置线宽
//5.描边
ctx.strokeStyle = '#0f0'; //描边的颜色
ctx.lineCap = 'square'; //线条端点的形状
ctx.stroke();
ctx.beginPath(); //重置路径
ctx.moveTo(10,100);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</body>效果图：
2. 闭合路径
闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath()方法闭合路径。
举例：
<body>
<!-- 创建画布 -->
<canvas id="cas" width="200" height="200"></canvas>
<script type="text/javascript">
var cas = document.getElementById('cas');
var ctx = cas.getContext('2d');
ctx.moveTo(10,10); //确定起始点
ctx.strokeStyle = '#00f'; //设置描边颜色
ctx.lineTo(10,150); //确定第一个端点
ctx.lineTo(150,150);//确定第二个端点
ctx.closePath();//闭合路径
ctx.stroke(); //描边
</script>
</body>效果图：
五、图形填充
使用画布中的fill()方法填充图形。
fillStyle="颜色"； //设置填充色fill()； //进行填充
举例：
<body>
<!-- 创建画布 -->
<canvas id="cas" width="200" height="200"></canvas>
<script type="text/javascript">
var cas = document.getElementById('cas');
var ctx = cas.getContext('2d');
ctx.moveTo(10,10); //确定起始点
ctx.strokeStyle = '#00f'; //设置描边颜色
ctx.lineTo(10,150); //确定第一个端点
ctx.lineTo(150,150);//确定第二个端点
ctx.closePath();//闭合路径
// ctx.stroke(); //描边
ctx.fillStyle = 'red'; //设置填充色
ctx.fill();//进行填充
</script>
</body>
效果图：
六、绘制圆
在画布中，使用arc()方法可以绘制圆或弧线。
arc(x,y,r,开始角,结束角,方向)x和y: x和y表示圆心在x轴和y轴的坐标位置。
r:表示圆形或弧形的半径，用于确定图形的大小。
开始角:表示初始弧点位置。其中弧点使用数值"Math.PI”(圆围率，可以理解为180度)表示。——0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
结束角:结束的弧点位置，初始角的设置方式一致。——0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
方向:分为顺时针和逆时针绘。——true(逆时针)、false(顺时针)
举例：
<body>
<canvas id="cas" width="400" height="300">
您的浏览器不支持画布
</canvas>
<script type="text/javascript">
var ctx = document.getElementById("cas").getContext('2d');
ctx.beginPath();//开始路径
ctx.arc(100,100,80,0,2*Math.PI,true); //绘制圆
ctx.closePath();//闭合路径
ctx.fillStyle = 'green';
ctx.fill();
//绘制 嘴
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 5;
ctx.arc(100,120,25,Math.PI/6,5*Math.PI/6,false);
ctx.stroke();
//绘制 左眼
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 5;
ctx.arc(70,80,20,Math.PI/400,5*Math.PI/1,true);
ctx.stroke();
//绘制 右眼
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 5;
ctx.arc(130,80,20,Math.PI/400,5*Math.PI/1,true);
ctx.stroke();
</script>
</body>效果图：
