canvas有哪些属性和方法 canvas定义

Canvas 是一个强大的二维图形绘制工具，提供了许多属性和方法来创建和操作图形。以下是一些常用的 Canvas 属性和方法：

### 属性

1. **`canvas.width` 和 `canvas.height`**:

- 设置或获取 Canvas 元素的宽度和高度。

- 这些属性直接影响绘图表面的大小。

2. **`ctx.fillStyle`**:

- 设置或获取填充绘图时使用的颜色、渐变或模式。

3. **`ctx.strokeStyle`**:

- 设置或获取描边绘图时使用的颜色、渐变或模式。

4. **`ctx.lineWidth`**:

- 设置或获取线条的宽度。

5. **`ctx.font`**:

- 设置或获取绘制文本时使用的当前文本样式。

6. **`ctx.textAlign`**:

- 设置或获取文本的对齐方式（如 `left`, `right`, `center`）。

7. **`ctx.globalAlpha`**:

- 设置或获取全局透明度，值在 0.0（完全透明）到 1.0（完全不透明）之间。

### 方法

1. **路径绘制方法**:

- `ctx.beginPath()`: 开始一条新的路径。

- `ctx.moveTo(x, y)`: 移动到指定的坐标。

- `ctx.lineTo(x, y)`: 从当前位置绘制一条线到指定坐标。

- `ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)`: 绘制圆弧或圆。

- `ctx.closePath()`: 闭合路径。

2. **绘制方法**:

- `ctx.fill()`: 填充当前绘图路径。

- `ctx.stroke()`: 描边当前绘图路径。

- `ctx.clearRect(x, y, width, height)`: 清除指定矩形区域，使其完全透明。

- `ctx.fillRect(x, y, width, height)`: 绘制填充矩形。

- `ctx.strokeRect(x, y, width, height)`: 绘制矩形边框。

3. **文本绘制方法**:

- `ctx.fillText(text, x, y, maxWidth)`: 在指定位置绘制填充文本。

- `ctx.strokeText(text, x, y, maxWidth)`: 在指定位置绘制文本轮廓。

4. **图像处理方法**:

- `ctx.drawImage(image, dx, dy)`: 在指定位置绘制图像。

- `ctx.drawImage(image, dx, dy, dWidth, dHeight)`: 绘制图像并缩放到指定尺寸。

- `ctx.getImageData(sx, sy, sw, sh)`: 返回包含画布上指定矩形像素数据的对象。

5. **变换方法**:

- `ctx.translate(x, y)`: 重新映射画布上的 (0, 0) 位置。

- `ctx.rotate(angle)`: 旋转画布。

- `ctx.scale(x, y)`: 缩放画布。

- `ctx.transform(a, b, c, d, e, f)`: 矩阵变换画布。

- `ctx.setTransform(a, b, c, d, e, f)`: 重置当前变换为单位矩阵，然后调用 `transform`。

Canvas 提供的这些属性和方法，使得它成为一个灵活而强大的工具，可以用于各种 2D 绘图任务，从简单的形状到复杂的游戏场景，甚至是数据可视化。

我的文章可能还有不足之处，如有不同意见，请留言讨论。