【HTML】HTML5画布

1. 认识画布

说到画布，其实大家并不陌生，在美术课上，我们可以用画笔在画布上绘画和涂鸦。在网页中，我们把用于绘制图形的特殊区域也称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。

---

2. 使用画布

创建画布： 使用HTML5中的canvas标签可以在网页中创建画布。

语法格式：

<canvas id="画布名称" width="数值" height="数值">
	canvas
</canvas>

获取画布： 要想在JavaScript中控制画布，首先要获取画布。使用getElementById()方法可以获取网页中的画布对象。

语法格式：

var canvas = document.getElementById('id名');

准备画笔： 画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。

语法格式：

画布对象名.getContext('2d');

注：在JavaScript中，我们通常会定义一个变量来保存获取的context对象。

var context = 画布对象名.getContext('2d');

---

3. 绘制线

一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。

初始位置：

• 在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
• • 在画布中使用moveTo(x,y)方法来定义初始位置

// eg：
var cas = document.getElementById('cas');
var context = cas.getContext('2d');
context.moveTo(100,100);

连接端点：

• 连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。
• 在画布中使用lineTo(x,y)方法来定义连线端点。

context.lineTo(100,100);

描边：

• 通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。
• 使用画布中的stroke()方法，可以实现线的可视效果。

context.stroke();

---

4. 线的样式

宽度：

• 使用画布中的lineWidth属性可以定义线的宽度。

• 该属性的取值为数值（不带单位），以像素为计量。

context.lineWidth='10';

描边颜色：

• 使用画布中的strokeStyle属性可以定义线的描边颜色。

• 该属性的取值为十六进制颜色值或颜色英文。

context.strokeStyle='#f00';
context.strokeStyle='red';

端点形状：

• 默认情况下，线的端点是方形的。
• 通过画布中的lineCap属性可以改变端点的形状。
  

属性值	显示效果
butt(默认值)	默认效果，无端点，显示直线方形边缘。
round	显示圆形端点。
square	显示方形端点

---

5. 线的路径

重置路径：

• 在同一画布中，我们添加再多的连线端点也只能有一条路径。
• 如果想要开始新的路径，就需要使用beginPath()方法。
• 当出现beginPath()即表示路径重新开始。
  

闭合路径：

• 闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。
• 在画布中，使用closePath()方法闭合路径。
  

---

6. 填充路径

使用画布中的fill()方法填充图形。

---

7. 绘制圆

在画布中，使用arc()方法可以绘制圆或弧线。

基本语法格式：

arc(x,y,r,开始角,结束角,方向);

• x和y：表示圆心的x轴和y轴的坐标位置。
• r&