CANVAS笔记

Canvas是HTML5中的一个功能强大的绘图API，它提供了一种在网页上绘制图形、创建动画和处理图像的方式。通过使用Canvas，可以使用JavaScript在网页上创建和操作各种图形。

下面是一些关于Canvas的重要信息：

1. 基本概念：Canvas是一个矩形区域，可以用来绘制图形。您可以通过指定宽度和高度来创建一个Canvas元素，并将其插入到HTML文档中的适当位置。

2. API方法：使用Canvas API，您可以绘制各种图形，如线条、矩形、圆形、路径等。您可以选择颜色、样式、阴影、渐变和图案等来自定义绘制的图形。

3. 绘图上下文：可通过getContext()方法获取Canvas的上下文对象。Canvas上下文有两种类型：2D上下文和WebGL上下文。2D上下文用于绘制2D图形，而WebGL上下文用于绘制3D图形。

4. 动画：通过更新和重绘Canvas，您可以创建动画效果。可以使用定时器（如setInterval或requestAnimationFrame）来更新Canvas，并在每个帧上重新绘制图形。

5. 图像处理：Canvas还提供了一些用于处理图像的方法，例如绘制、旋转、缩放和剪切等。您可以使用Canvas加载图片，并对其进行处理和操作。

6. 事件处理：Canvas可以响应鼠标点击、移动、键盘事件等，从而实现交互式应用程序。

7. 兼容性：大多数现代浏览器都支持Canvas，包括Chrome、Firefox、Safari和Edge等。

---

创建Canvas：

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

使用`<canvas>`标签可以在HTML文档中创建一个Canvas元素。可以通过指定宽度和高度来设置Canvas的大小。

获取上下文：

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

在JavaScript代码中，可以使用`getContext()`方法获取一个绘图上下文对象。`context`变量被用来执行绘图操作。

绘制基本形状：
绘制线段：

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();

绘制填充的矩形：

context.fillRect(x, y, width, height);

绘制描边的矩形：

context.strokeRect(x, y, width, height);

绘制圆形：

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.fill();

设置样式：
设置填充颜色：

context.fillStyle = "blue";

设置描边颜色：

context.strokeStyle = "red";

设置线宽：

context.lineWidth = 5;

设置字体：

context.font = "30px Arial";

渐变与阴影效果：
创建渐变：

var gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "white");

将渐变应用到形状：

context.fillStyle = gradient;

创建阴影效果：

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.shadowColor = "gray";

图像处理：
加载图像：

var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  context.drawImage(image, x, y);
};

图像剪切：

context.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);

图像旋转、缩放、翻转：

context.translate(x, y);
context.rotate(angle);
context.scale(scaleX, scaleY);

动画：
使用定时器（requestAnimationFrame）来实现动画效果。在每一帧中更新Canvas并重新绘制：

function draw() {
  // 更新Canvas状态
  // 绘制图形
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

事件处理：

监听鼠标点击事件：

canvas.addEventListener("click", function(event) {
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;
  // 处理点击事件
});

监听键盘事件：

window.addEventListener("keydown", function(event) {
  var keyCode = event.keyCode;
  // 处理键盘事件
});