如何在HTML5中使用Canvas绘制图形?


在HTML5中,我们可以使用canvas元素在网页上绘制二维图形。要绘制canvas图形,我们使用<canvas>标签,它创建交互式图形和动画,并将其渲染到Web浏览器中。这个Canvas元素只在HTML 5中可用,之前的版本中没有。它可以生成游戏中和数据领域中复杂的可视化效果,帮助开发人员直观地展示工作成果。在这篇文章中,我们将学习如何使用canvas元素通过各种示例来绘制基本的二维图形设计。

语法

<canvas id="id_name">……write some text……</canvas>

此元素用于绘制几何图形。id选择器目标是具有给定id属性的单个元素。

var var_name = getElementById("id_name")

var是用于在javascript中定义变量的关键字。var_n 1ame是用户设置的变量名。getElementById(“id_name”)匹配特定的id。

使用的属性

示例中使用的属性如下:

  • color − 定义文本的颜色。

  • width − 定义画布图形的宽度。

  • height − 定义画布图形的高度。

HTML Canvas参考

示例中使用了以下参考:

  • getContext() − 此方法设置二维图形。

  • beginPath() − begin方法开始起始路径并结束最后一条路径。

  • rect() − 此方法绘制矩形。

  • stroke() − 此方法绘制画布图形的路径。

  • strokeStyle() − 此方法填充画布中几何图形的颜色边框。

  • fillStyle() − 此方法填充几何图形的颜色。

  • fill() − 此方法填充画布中当前绘制的几何图形。

  • lineTo() − 此方法添加新线并在现有点创建线。

  • moveTo() − 此方法移动画布中的特定点。

  • closePath() − 此方法从最近的点创建路径并返回到起点。

示例1

在下面的示例中,代码演示了如何使用HTML5 canvas和JavaScript绘制矩形。网页标题为“Canvas形状”,文本“使用Canvas绘制矩形”为红色。代码生成一个ID为“rectangle”的canvas元素,宽度和高度均为200像素。“rect()”方法在JavaScript中用于在画布上绘制矩形,同时指示其位置、宽度和高度。最后,通过调用“stroke()”方法,以标准黑色绘制矩形。

<!DOCTYPE html>
<html>
<title>Rectangle using Canvas</title>
<head>
</head>
<body>
   <center>
      <h1 style="color:red;">Canvas Shapes</h1>
      <h3>Rectangle</h3>
      <canvas id="rectangle" width="200" height="200" />
      <script>
         var rg = document.getElementById("rectangle");
         var rect = rg.getContext("2d");
         rect.beginPath();
         rect.rect(10, 10, 170, 100);
         rect.stroke();
      </script> 
   </center>
</body>
</html>

示例2

在下面的HTML和JavaScript示例中,以下代码创建一个canvas元素,并在其中绘制一个红色的圆圈。圆圈的半径为50像素,中心位于(150, 150)。strokeStyle属性用于以深蓝色勾勒圆圈,fillStyle属性则用红色填充圆圈。要绘制圆圈,请使用arc()方法并指定中心点、半径以及弧度的起始和结束角度。canvas标签的id为“circle”,用于在JavaScript代码中访问canvas元素。为了在网页上水平居中canvas元素,代码包含在一个center标签内。

<!DOCTYPE html>
<html>
<title>Cirle using Canvas</title>
<head>
</head>
<body>
   <center>
      <h1 style="color:red;">Canvas Shapes</h1>
      <h2>Circle</h2>
      <canvas id="circle" width="290" height="250" >
      <script>
         var cle = document.getElementById("circle");
         var ctx = cle.getContext("2d");
         ctx.beginPath();
         ctx.arc(150, 150, 50, 0, 2*Math.PI );
         ctx.strokeStyle = 'darkblue ';
         ctx.fillStyle = "red";
         ctx.fill();
         ctx.stroke();
      </script> 
   </center>
</body>
</html>

示例3

在下面的示例中,以下代码演示了如何使用JavaScript在HTML5 canvas上绘制三角形。网页标题为“使用Canvas绘制三角形”,绿色标题文本为“Canvas形状”。代码生成一个ID为“triangle”的canvas元素,尺寸为100像素乘200像素。三角形用JavaScript绘制,首先使用“moveTo()”方法设置笔的初始位置,然后使用“lineTo()”方法绘制连接三角形顶点的线。最后,使用“stroke()”方法绘制三角形轮廓。“closePath()”方法用于关闭三角形的路径,从而完成形状的绘制。

<!DOCTYPE html>
<html>
<title>Triangle using Canvas</title>
<head>
</head>
<body>
   <center>
      <h1 style="color:green;">Canvas Shapes</h1>
      <h2>Triangle</h2>
      <canvas id="triangle" width="100" height="200" >
      <script>
         var tr = document.getElementById("triangle");
         var tri = tr.getContext("2d");
         tri.beginPath()
         tri.moveTo(0, 50);
         tri.lineTo(50, 0);
         tri.lineTo(100, 50);
         tri.lineTo(0, 50);
         tri.stroke();
         tri.closePath();
      </script> 
   </center>
</body>
</html>

结论

我们通过绘制不同的canvas图形形状来探索了这三个示例。然后我们看到了如何使用引用来设置canvas图形的属性。canvas元素使用CSS属性进行样式设置。上述几何图形是由Canvas绘制的,但也可以使用SVG元素绘制。

更新于:2023年5月16日

662 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告