HTML5 Canvas基础教程

HTML5 Canvas是HTML5的一部分，它提供了一个JavaScript API，用于在网页上绘制图形，Canvas是一个矩形区域，可以用JavaScript在这个区域里绘制各种形状、图像、动画等，它是HTML5中非常重要的一个特性，可以用来制作丰富的网页交互效果。

一、Canvas的基本概念

1、画布（Canvas）：一个HTML元素，用于在网页上绘制图形。

2、上下文（Context）：画布上的一个绘图环境，提供了绘制图形的方法和属性。

3、像素（Pixel）：画布上的最小单位，每个像素都有一个颜色值。

4、路径（Path）：由直线、曲线等线条组成的图形。

二、创建Canvas元素

要在网页上创建一个Canvas元素，可以使用以下HTML代码：

<canvas id="myCanvas" width="300" height="200"></canvas>

id属性用于给Canvas元素命名，以便在JavaScript中引用；width和height属性分别设置画布的宽度和高度。

三、获取Canvas上下文

要绘制图形，首先需要获取Canvas的上下文，可以通过以下JavaScript代码获取：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

getContext("2d")方法用于获取2D上下文，它支持绘制二维图形，还可以使用其他类型的上下文，如getContext("3d")用于获取3D上下文。

四、绘制基本图形

1、绘制矩形：

context.fillRect(x, y, width, height); // 填充矩形
context.strokeRect(x, y, width, height); // 绘制矩形边框

2、绘制圆形：

context.arc(x, y, radius, startAngle, endAngle, anticlockwise); // 绘制圆弧或圆形
context.fill(); // 填充圆形内部
context.stroke(); // 绘制圆形边框

3、绘制线条：

context.moveTo(x, y); // 将绘图起点移动到指定位置
context.lineTo(x1, y1); // 从当前位置绘制一条直线到指定位置
context.lineWidth = 2; // 设置线条宽度
context.strokeStyle = "red"; // 设置线条颜色
context.stroke(); // 绘制线条

五、绘制路径

路径是由多个线段组成的图形，可以使用以下方法绘制路径：

1、beginPath()：开始一个新的路径。

2、moveTo(x, y)：将绘图起点移动到指定位置。

3、lineTo(x, y)：从当前位置绘制一条直线到指定位置。

4、arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧或圆形。

5、closePath()：闭合路径。

6、fill()：填充路径内部。

7、stroke()：绘制路径边框。

8、isPointInPath(x, y)：判断指定点是否在路径内。

9、clip()：从当前绘图状态剪切出路径内的图形。

10、transform()：对路径进行变换操作，如平移、缩放、旋转等。

六、保存和加载图像

可以使用以下方法在Canvas上绘制图像：

1、drawImage(image, x, y)：将图像绘制到画布上指定位置，可以设置其他参数，如图像的宽度、高度、源图像的横向和纵向缩放比例等。

2、drawImage(image, sx, sy, sw, sh, x, y, width, height)：将图像的一部分绘制到画布上指定位置，可以设置其他参数，如源图像的横向和纵向起始坐标、起始宽度和高度、目标宽度和高度等。