JavaScript - Canvas 画布

使用 JavaScript 处理 Canvas 画布

HTML 中的 <canvas> 元素可用于在网页上创建和绘制图形。它可以在网页上绘制各种图形或形状，例如线条、圆形等，并为其添加动画效果。

您可以在 HTML 中定义 <canvas> 元素，然后使用 JavaScript 在网页上绘制图形。让我们了解一下在 HTML 中定义 Canvas 元素以及如何使用 JavaScript 进行操作的语法。

语法

使用以下语法创建 HTML Canvas 元素。

<canvas id="myCanvas" width="480" height="320">
    您的浏览器不支持 HTML Canvas 标签。
</canvas>

在上述语法中，我们定义了一个 HTML 元素 <canvas>，其 ID 为"myCanvas"。当浏览器不支持 <canvas> 元素时，将会显示 <canvas> 标签之间的消息。

我们使用 document 对象的 getElementById() 方法访问 canvas 元素。请看以下语法:

var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');

在 JavaScript 中，我们可以使用 getContext('2d') 方法获取 2D 画布的上下文。接下来，我们可以使用各种方法绘制形状，并通过引用 'ctx' 变量来填充颜色。

示例

示例:绘制矩形

在下面的代码中，我们在 HTML 中添加了 <canvas> 元素。

在 JavaScript 中，我们使用 getContext('2d') 方法访问画布的上下文。之后，我们使用 fillstyle() 方法为画布中的元素着色。fillRect() 方法用于绘制矩形。它获取画布中四个角的坐标。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Drawing Rectangle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // 获取画布的 2D 上下文
      var ctx = canvas.getContext("2d");
      // 使用画布绘制矩形
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(50,30, 470, 240);
   </script>
</body>
</html>

示例:绘制圆形

在下面的代码中，我们使用 arc() 方法绘制了一个圆形。该方法的前两个参数为圆形位置的坐标，第三个参数为圆形的半径。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing circle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
       Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var c = document.getElementById("myCanvas");
      // 获取画布的 2D 上下文
      var ctx = c.getContext("2d");
      // 使用画布绘制圆圈
      ctx.beginPath();
      ctx.arc(300, 150, 100, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fillStyle = "green";
      ctx.fill();
</script>
</body>
</html>

示例:绘制线条

在下面的代码中，我们使用 moveTo() 和 lineTo() 方法绘制线条。moveTo() 方法以线条的起点作为参数，lineTo() 方法以线条的终点作为参数。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing lines on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // 获取画布的 2D 上下文
      var ctx = canvas.getContext("2d");
      // 使用画布绘制线条
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 200);
      ctx.stroke();
      ctx.moveTo(300, 200);
      ctx.lineTo(400, 0);
      ctx.stroke();
</script>
</body>
</html>

示例:绘制线性渐变

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing linear gradient on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // 获取画布的 2D 上下文
      var ctx = canvas.getContext("2d");
      // 绘制线性渐变
      ctx.beginPath();
      var grd = ctx.createLinearGradient(0, 0, 440, 0);
      grd.addColorStop(0, "yellow");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(10, 10, 550, 240);
      ctx.fill();
      ctx.closePath();
   </script>
</body>
</html>

示例:文本渲染

在下面的示例中，我们在画布上渲染了一条文本消息"Hello"。为此，我们使用了 fillText() 方法。HTML Canvas 中的 fillText() 方法会在画布元素上绘制一个文本字符串。

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Rendering text on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
    const canvas = document.getElementById('myCanvas');
	 // 获取画布的 2D 上下文
    const ctx = canvas.getContext('2d');
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>

我们已经学习了如何在 HTML 中使用 <canvas> 元素，以及如何通过 JavaScript 访问元素来绘制图形。我们可以绘制各种形状，并为形状添加颜色。