JavaScript - Canvas 画布

使用 JavaScript 处理 Canvas

HTML 的 <canvas> 元素可以用来在网页上创建和绘制图形。它可以在网页上绘制各种图形或形状，例如线条、圆圈等，并对其进行动画处理。

您可以在 HTML 中定义 <canvas> 元素，然后使用 JavaScript 在网页上绘制图形。让我们看一下在 HTML 中定义 canvas 元素并在 JavaScript 中操作它的语法。

语法

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

<canvas id="myCanvas" width="480" height="320">
   Your browser does not support the HTML canvas tag.
</canvas>

在上述语法中，我们定义了 id 为 'myCanvas' 的 HTML <canvas> 元素。当浏览器不支持 <canvas> 元素时，<canvas> 标记之间的消息将显示。

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

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

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

示例

示例：绘制矩形

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

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

<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");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing rectangle using canvas
      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");
      // Getting the 2D context of the canvas
      var ctx = c.getContext("2d");
      // Drawing circle using canvas
      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");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing lines using canvas
      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");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing a linear gradient
      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>

示例：文本渲染

在下面的示例中，我们在 canvas 上渲染了文本消息“Hello”。为此，我们使用了 fillText() 方法。HTML Canvas 中的 fillText() 方法在 canvas 元素上绘制文本字符串。

<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');
	 // Getting the 2D context of the canvas
    const ctx = canvas.getContext('2d');
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>

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

打印页面