JS画布绘制图像

在现代web开发中，Canvas是非常常见的工具之一，它使用JavaScript来绘制图像。Canvas是用于在Web页面上绘制图形、动画和其他视觉效果的HTML5元素。在这里，我们将讨论如何使用JavaScript画布API将图像绘制在画布上。

基础

要绘制画布，我们需要使用HTML元素，然后使用JavaScript访问该元素并在其上绘制图像。

<canvas id="canvas"></canvas>

在JavaScript中，我们使用CanvasRenderingContext2D接口来绘制图像。它提供了一套绘制矩形、线条、圆、文本等基本图形的API。

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 绘制矩形
ctx.fillRect(0, 0, canvas.width, canvas.height)

// 绘制圆形
ctx.beginPath()
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
ctx.fillStyle = 'red'
ctx.fill()

加载图像

通过使用Image对象，我们可以轻松加载一个图像。当图像完全加载时，将触发load事件。

const image = new Image()
image.src = 'path/to/image'
image.onload = () => {
  // 图像加载完成
}

绘制图像

一旦图像被加载，我们就可以使用drawImage方法在画布上绘制它。

ctx.drawImage(image, x, y)

我们还可以使用drawImage方法绘制部分图像。例如，下面的代码绘制了图像的右半部分，并将其放在画布的中心。

const imageWidth = image.width / 2
const imageHeight = image.height

ctx.drawImage(
  image,
  0, 0, imageWidth, imageHeight, // 图像剪切区域的左上角坐标及宽高
  canvas.width / 2, canvas.height / 2, imageWidth, imageHeight // 图像绘制区域的左上角坐标及宽高
)

创建图像数据

除了绘制图像，我们还可以使用画布API创建和操作像素级别的图像数据。在CanvasRenderingContext2D对象上，有两个方法可用于创建图像数据。

1. getImageData()：返回画布指定矩形区域的像素数据。
2. createImageData()：创建指定宽高的新的ImageData对象。

该对象包含一个 data 数组，其中每个元素的值表示图像中一个像素的颜色值。每个颜色值由四个部分组成，即红、绿、蓝和透明度（RGBA）。每个颜色值的范围是0-255。因此，图像数据的大小是像素数量乘以4。

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
const data = imageData.data // 包含画布像素数据的数组

const newImageData = ctx.createImageData(width, height)

像素操作

通过操作 ImageData 对象的 data 数组，我们可以对每个像素进行各种操作。

下面演示了如何将图像反转。

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

for (let i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i] = 255 - imageData.data[i]   // 红
  imageData.data[i + 1] = 255 - imageData.data[i + 1] // 绿
  imageData.data[i + 2] = 255 - imageData.data[i + 2] // 蓝
}

ctx.putImageData(imageData, 0, 0)

总结

在本文中，我们学习了如何使用HTML5 Canvas API绘制图像。从加载图像到操作像素，我们了解了一些基本的概念。我们还讨论了一些显而易见的例子，包括绘制矩形、圆形、剪切和绘制图像等。通过这些知识，您可以创造出各种丰富多彩的图形和动画。