# canvans

## 什么是Canvas？

Canvas是HTML5中的一个元素，用于在网页上绘制图形，它提供了一个2D绘图上下文，可以使用JavaScript进行操作，Canvas API提供了各种方法来绘制形状、图像、文本等，它还支持动画和游戏的开发。

## Canvas的基本用法

Canvas可以通过``标签或`document.createElement(‘canvas’)`方法创建，一旦创建了Canvas对象，就可以使用Canvas API进行绘图，以下是一个简单的示例：

“`html

“`

在这个例子中，我们首先创建了一个``元素，并设置了其宽度、高度和边框样式，我们使用`getElementById`方法获取该元素的引用，并使用`getContext`方法获取2D绘图上下文，我们设置填充颜色为红色，并使用`fillRect`方法绘制一个矩形。

## Canvas的高级用法

Canvas API还提供了许多高级功能，如渐变、图案、阴影、变换等，以下是一些常见的高级用法：

### 渐变

Canvas API支持线性渐变和径向渐变，以下是一个线性渐变的示例：

“`javascript

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

var gradient = ctx.createLinearGradient(0, 0, 200, 0);

gradient.addColorStop(0, “red”);

gradient.addColorStop(1, “blue”);

ctx.fillStyle = gradient;

ctx.fillRect(0, 0, 200, 100);

“`

在这个例子中，我们首先创建了一个线性渐变对象，然后添加了两个颜色停止点，我们将渐变设置为填充样式，并绘制了一个矩形。

### 图案

Canvas API还支持使用图像作为图案进行填充，以下是一个图案填充的示例：

“`javascript

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

var img = new Image();

img.src = “example.jpg”;

img.onload = function() {

var pattern = ctx.createPattern(img, “repeat”);

ctx.fillStyle = pattern;

ctx.fillRect(0, 0, 200, 200);

};

“`

在这个例子中，我们首先创建了一个图像对象，并设置了其源，我们使用`createPattern`方法创建了一个图案对象，并将其设置为填充样式，我们绘制了一个矩形。

### 阴影

Canvas API还支持阴影效果，以下是一个阴影的示例：

“`javascript

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

ctx.shadowColor = “black”;

ctx.shadowBlur = 10;

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.fillStyle = “red”;

ctx.fillRect(0, 0, 100, 100);

“`

在这个例子中，我们首先设置了阴影的颜色、模糊程度和偏移量，我们设置了填充颜色，并绘制了一个矩形。