HTML5画布（canvas）

目录

一、简介

二、使用画布

四、绘制简单图形

1、绘制线段

2、绘制三角形

3、绘制矩形

4、绘制圆

5、绘制弧线

五、简单实例（一个火柴人）

---

一、简介

使用canvas可以在网页上绘制图形、文字、图片等。

二、使用画布

1、创建画布（矩形区域的画布）：<canvas></canvas>

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

您的浏览器不支持canvas  /*当浏览器不支持<canvas>时显示*/

</canvas>

ps：canvas本身不具有绘制功能，可以通过JavaScript操作绘制图形的API进行绘制操作。

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

var canvas = document.getElementById('[画布名称]');

2、准备画笔（获取上下文对象）：canvas.getContext(“2d”);

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

canvas.getContext('2d');

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

var context = canvas.getContext('2d');

3、开始路径规划：context.beginPath();

一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边，我们需要根据坐标（如下）规划路径。

在平面（即2D）中，在画布中从最左上角的坐标原点（0,0）开始，x轴向右增大，y轴向下增大。

4、移动起始点：context.moveTo(x,y);

我们确定的起始点就是基于上面规划路径时用到的坐标，这个起始点就是我们画图时的下笔位置。

5、绘制线（矩形，圆形，图片…）:context.lineTo(x,y)

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

6、闭合路径：context.closePath();

绘制直线确定了起始点和线头点后，便形成了一条绘制路径，如果复杂路径绘制，必须使用路径开始和结束。

context.beginPath();//开始路径

context.closePath();//结束路径

7、绘制描边：context.stroke();

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