HTML Canvas包含哪些绘图方法

在本文中，我们将介绍HTML Canvas中常用的绘图方法。HTML Canvas是HTML5中的一个重要功能，可以通过JavaScript进行操作，用于绘制图形、动画和游戏等。

阅读更多：HTML 教程

创建Canvas画布

在开始绘图之前，我们需要先创建一个Canvas画布。通过HTML中的

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

这个例子创建了一个宽度为500像素，高度为300像素的Canvas画布。

绘制2D图形

绘制矩形

Canvas提供了绘制矩形的方法，可以使用fillRect()和strokeRect()方法。

fillRect()方法用于绘制填充矩形，示例代码如下：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 200, 100);

上述代码通过fillRect()方法绘制了一个左上角坐标为(50,50)，宽度为200，高度为100的填充矩形。

strokeRect()方法用于绘制边框矩形，示例代码如下：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(50, 50, 200, 100);

上述代码通过strokeRect()方法绘制了一个左上角坐标为(50,50)，宽度为200，高度为100的边框矩形。

绘制圆形

Canvas还提供了绘制圆形的方法，可以使用arc()方法。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.arc(250, 180, 75, 0, 2 * Math.PI);
ctx.stroke();

上述代码通过arc()方法绘制了一个圆心坐标为(250, 180)，半径为75的圆形。

绘制路径

Canvas还支持绘制路径，可以使用beginPath()和closePath()方法来定义路径的开始和结束。可以使用moveTo()方法移动路径的起点，使用lineTo()方法绘制线段。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.stroke();

上述代码通过beginPath()方法开始定义路径，moveTo()方法移动路径起点，lineTo()方法绘制线段，closePath()方法结束路径，stroke()方法绘制路径。

清除画布

如果需要清除整个Canvas画布，可以使用clearRect()方法。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

上述代码将清除整个Canvas画布。

绘制文本

在Canvas中也可以绘制文本，可以使用fillText()和strokeText()方法。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 50, 50);

上述代码使用fillText()方法绘制了一个文本，起始坐标为(50, 50)。

绘制图像

Canvas还可以用于绘制图像，使用drawImage()方法可以在Canvas上绘制图片。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "image.png";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

上述代码通过drawImage()方法绘制了一张图片，起始坐标为(0, 0)。