大师级 HTML5 Canvas：从零开始到创意无限

大师级 HTML5 Canvas：从零开始到创意无限

1：HTML5 Canvas 的魅力

HTML5 Canvas，就像是一块神奇的魔法布，可以让你在网页上创造出各种绚丽多彩的图形和动画。在本章中，我们将探索 HTML5 Canvas 的基础知识，了解它的魅力所在。

HTML5 Canvas 的基本结构非常简单，只需要一个 canvas 元素即可。然后，你可以使用 JavaScript 来在 canvas 上进行绘制。比如，下面这段代码就可以在一个 400x400 像素的 canvas 上绘制一个红色的矩形：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 300, 300);
</script>

在这段代码中，我们首先获取了一个 canvas 元素，并获取了它的 2D 上下文。然后，我们设置了填充样式为红色，并使用 fillRect 方法绘制了一个红色的矩形。

2：绘制基本形状

Canvas 不仅可以绘制矩形，还可以绘制各种基本形状，如圆形、线条等。本章将介绍如何使用 Canvas 绘制基本形状，并讨论一些常用的绘制方法。

首先，让我们来看一个绘制圆形的例子：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(200, 200, 100, 0, 2 * Math.PI);
  ctx.fillStyle = 'blue';
  ctx.fill();
</script>

在这段代码中，我们使用了 beginPath 方法开始绘制路径，然后使用 arc 方法绘制了一个圆形。最后，我们设置了填充样式为蓝色，并使用 fill 方法填充了圆形。

3：绘制文本和图像

Canvas 不仅可以绘制图形，还可以绘制文本和图像。在本章中，我们将介绍如何使用 Canvas 绘制文本和图像，并讨论一些常用的绘制方法。

首先，让我们来看一个绘制文本的例子：

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.font = '30px Arial';
  ctx.fillStyle = 'red';
  ctx.fillText('Hello, Canvas!', 50, 100);
</script>

在这段代码中，我们首先设置了字体样式和填充颜色，然后使用 fillText 方法绘制了一段文本。

4：图像处理基础

Canvas 不仅可以绘制图像，还可以对图像进行处理。在本章中，我们将介绍一些基本的图像处理技术，如亮度调整、色彩滤镜等。

首先，让我们来看一个简单的亮度调整的例子：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var d