canvas有哪些api

Canvas是HTML5新增的绘图API。它提供了一组绘制图形、制作动画的功能，是在HTML5中实现各种动画效果的一个重要手段。本文将介绍Canvas的相关API。

## 1. canvas的基础

### 1.1 canvas标签

Canvas标签是用来绘制图形的HTML标签。它的格式为``。Canvas标签的宽度和高度可以通过style属性或者直接在标签中定义。

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

### 1.2 canvas context

Canvas上下文定义了绘画环境。可以使用Canvas上下文在Canvas中绘制各种图形。可以通过getContext()方法获得Canvas上下文。getContext()方法接受一个参数，表示上下文类型，通常使用2d表示2D绘图。

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

## 2. canvas绘制基本图形

### 2.1 绘制矩形

Canvas提供了四个方法用于绘制矩形：

- `fillRect(x, y, width, height)`：绘制一个填充的矩形。

- `strokeRect(x, y, width, height)`：绘制一个矩形的边框。

- `clearRect(x, y, width, height)`：清除指定矩形区域，让清除部分完全透明。

- `rect(x, y, width, height)`：创建一个矩形，但不会自动绘制。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

### 2.2 绘制路径

在Canvas中，路径是通过不同方法和属性来绘制的。接下来我们将介绍一些设置路径的方法和属性。

#### 2.2.1 移动笔触

- `beginPath()`：起始一条路径，或重置当前路径。

- `moveTo(x, y)`：把路径移动到画布中的指定点，不创建线条。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

#### 2.2.2 画圆弧

- `arc(x, y, radius, startAngle, endAngle, anticlockwise)`：创建弧/曲线（用于创建圆或部分圆）。

其中x和y是圆的中心坐标，radius是圆的半径，startAngle和endAngle表示圆弧的起始角度和结束角度。anticlockwise是一个布尔值，表示是否逆时针绘制。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.stroke();

#### 2.2.3 画贝塞尔曲线

- `quadraticCurveTo(cp1x, cp1y, x, y)`：创建二次贝塞尔曲线。

- `bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`：创建三次方贝塞尔曲线。

其中cp1x和cp1y是第一控制点的坐标，cp2x和cp2y是第二控制点的坐标，x和y是结束点的坐标。绘制贝塞尔曲线需要三点，起始点、控制点、结束点。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();

### 2.3 绘制文本

- `fillText(text, x, y, maxWidth)`：在画布上绘制实心的文本。

- `strokeText(text, x, y, maxWidth)`：在画布上绘制空心的文本。

其中text是要绘制的文本，x和y是文本的起点坐标。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

## 3. canvas图像操作

### 3.1 加载图像

- `drawImage(image, x, y)`：向Canvas上绘制图像。

其中image是要绘制的图像，可以是img标签、canvas标签或者是Image对象。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

### 3.2 像素操作

- `getImageData(x, y, width, height)`：从Canvas中获取图像数据。

- `putImageData(imgData, x, y)`：把图像数据放回Canvas中。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 70, 70);

## 4. canvas动画效果

### 4.1 requestAnimationFrame

requestAnimationFrame方法用于在下一次重绘之前调用指定函数更新动画。它可以确保动画效果的平滑流畅，并且不会影响多个动画效果之间的协调。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 50, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  x++;
  requestAnimationFrame(drawCircle);
}
requestAnimationFrame(drawCircle);

### 4.2 setInterval

setInterval方法用于按照指定时间间隔重复调用函数。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 50, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  x++;
}
setInterval(drawCircle, 10);

## 5. 总结

本文对Canvas的相关API进行了介绍。Canvas是一个功能强大的HTML5绘图API，可以实现各种各样的动画效果和图形绘制。我们可以使用Canvas中提供的方法和属性来创建图形、绘制路径、文本、图像，以及实现动画效果。同时在使用动画效果时，建议使用requestAnimationFrame方法，以确保动画效果的平滑流畅。