40：canvas - 上

**Canvas绘图基础**

###什么是Canvas？

Canvas是一种用于在网页中绘制图形的HTML元素。它允许开发者使用JavaScript来绘制各种类型的图形，包括直线、曲线、矩形、圆等。

### Canvas的基本属性和方法####1. getContext()

`getContext()`方法用于获取Canvas上下文对象，这个对象提供了绘图功能。常用的参数有：

* `2d`: 获取一个2D绘图上下文。
* `webgl`: 获取一个WebGL绘图上下文。

####2. fillStyle和strokeStyle`fillStyle`属性用于设置填充颜色，`strokeStyle`属性用于设置描边颜色。

javascript// 设置填充颜色为红色ctx.fillStyle = 'red';
// 设置描边颜色为蓝色ctx.strokeStyle = 'blue';

####3. fillRect()和strokeRect()

`fillRect()`方法用于绘制一个填充的矩形，`strokeRect()`方法用于绘制一个描边的矩形。

javascript// 绘制一个红色的填充矩形ctx.fillRect(10,10,50,50);
// 绘制一个蓝色的描边矩形ctx.strokeRect(70,70,50,50);

####4. fillText()和strokeText()

`fillText()`方法用于绘制填充的文本，`strokeText()`方法用于绘制描边的文本。

javascript// 绘制一个红色的填充文本ctx.fillText('Hello, World!',100,100);
// 绘制一个蓝色的描边文本ctx.strokeText('Hello, World!',150,150);

####5. save()和restore()

`save()`方法用于保存当前的绘图状态，`restore()`方法用于恢复之前保存的绘图状态。

javascript//保存当前的绘图状态ctx.save();
// 恢复之前保存的绘图状态ctx.restore();

### Canvas绘图实例#### 绘制一个圆形

javascript// 获取Canvas上下文对象var ctx = document.getElementById('canvas').getContext('2d');
// 设置填充颜色为红色ctx.fillStyle = 'red';
// 绘制一个圆形ctx.beginPath();
ctx.arc(100,100,50,0, Math.PI *2);
ctx.fill();

#### 绘制一个图表

javascript// 获取Canvas上下文对象var ctx = document.getElementById('canvas').getContext('2d');
// 设置填充颜色为红色ctx.fillStyle = 'red';
// 绘制一个背景矩形ctx.fillRect(10,10,200,100);
// 绘制一个X轴ctx.beginPath();
ctx.moveTo(20,110);
ctx.lineTo(220,110);
ctx.stroke();
// 绘制一个Y轴ctx.beginPath();
ctx.moveTo(10,120);
ctx.lineTo(10,210);
ctx.stroke();

### Canvas绘图注意事项* **Canvas的大小**: Canvas的大小必须在HTML中指定，否则会导致绘图错误。
* **Canvas的位置**: Canvas的位置必须在HTML中指定，否则会导致绘图错误。
* **JavaScript的版本**: JavaScript的版本必须支持Canvas功能，否则会导致绘图错误。

### Canvas绘图总结Canvas是网页中的一个强大工具，可以用于绘制各种类型的图形。通过使用Canvas的基本属性和方法，可以实现简单的绘图功能。然而，在实际应用中，还需要考虑Canvas的大小、位置以及JavaScript的版本等因素，以确保绘图正确无误。