javascript canvas API内容整理

以下是“JavaScript Canvas API内容整理”的详细攻略：

概述

Canvas是HTML5新增的绘图标签，它可以用来绘制各种形状、图案和动画效果。Canvas 的目标受众是 Web 开发者和其他需要在浏览器中处理图形的人。Canvas API提供了绘制路径、文本、图像以及栅格化的 canvas 上下文，可以用来创建动画、图表、游戏和图像编辑器等复杂的图形场景。

Canvas的基本用法

使用Canvas，我们需要在HTML文件中定义一个canvas标签，并且给它设置宽高。之后，我们就可以通过脚本获取到画布上下文，并开始调用其中的API绘制图形。

例如，下面是一个简单的Canvas绘制矩形的示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 50);
</script>

在这个例子中，我们首先获取到了canvas标签及其上下文，然后通过fillRect方法绘制了一个红色的矩形。其中，fillStyle用于设置填充颜色，fillRect用于绘制矩形。

Canvas API的各种用法

下面是Canvas API中常用的一些方法：

绘制形状

• fillRect(x, y, width, height)：绘制一个填充的矩形；
• strokeRect(x, y, width, height)：绘制一个矩形的边框；
• clearRect(x, y, width, height)：清除指定矩形区域，使其完全透明；
• fill()：填充先前的路径；
• stroke()：绘制先前的路径的边框，由线条的宽度、线条的端点和连接处的样式以及线条的颜色组成；
• beginPath()：起始一条路径；
• moveTo(x, y)：把路径移动到画布中的指定点，不创建线条；
• lineTo(x, y)：增加一个新点，然后在画布中创建从该点到最后指定点的线条；
• arc(x, y, radius, startAngle, endAngle, anticlockwise)：创建弧/曲线（用于创建圆或部分圆）；

绘制文本

• fillText(text, x, y)：在指定的位置填充指定的文本，可设置字体大小、颜色等样式；
• strokeText(text, x, y)：在指定的位置绘制指定的文本的边框；

绘制图像

• drawImage(image, x, y)：在画布上绘制图像；
• getImageData(x, y, width, height)：返回一个ImageData对象，该对象为画布上指定矩形内的所有像素数据；
• createImageData(width, height)：返回新的、空白的、指定大小的ImageData对象。

示例1：画布上绘制渐变色矩形

接下来，我们来看一个简单的示例，绘制一个渐变色矩形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'white');
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>

在这个例子中，我们首先获取到了canvas标签及其上下文，然后通过createLinearGradient方法创建了一个从左上角到右下角的线性渐变色，并通过addColorStop方法将红色和白色渐变区分为两个部分。最后，我们将渐变色作为填充颜色，使用fillRect方法将整个画布填充。

示例2：把图像画到画布上

下面是另一个示例代码：把一个来自于网络的图片，画到我们的Canvas画布上并调整大小。

<canvas id="myCanvas" width="200" height="150"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'https://picsum.photos/200/150';
  img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  }
</script>

在这个例子中，我们首先获取到了canvas标签及其上下文，并创建了一个Image对象。接着，我们把图片的源地址设置为https://picsum.photos/200/150，这是一个能够每次生成一张200x150大小的随机图片的API接口。最后，我们通过onload方法等待图片加载完成并绘制到画布上，使用drawImage方法将这张图片绘制到整个画布区域，从而让图片完全填充整个画布区域。