跳到主要内容

HTML Canvas

提示
  1. <canvas>标签的作用：HTML中的<canvas>标签用于创建图形，通常与JavaScript结合使用来在其内部绘制图形。
  2. JavaScript与Canvas API的结合：通过JavaScript和Canvas API，可以在<canvas>元素内创建各种图形，例如示例中展示的圆形。
  3. 绘图方法和属性：使用beginPath()开始新路径，arc()绘制圆形，fillStyle设置填充颜色，以及fill()完成填充，共同实现了圆形的绘制。

HTML 的 <canvas> 标签用于在 HTML 中创建图形。我们使用 JavaScript 在 <canvas> 内部创建图形。例如，

<canvas
  id="circle-canvas"
  height="200"
  width="200"
  style="border: 1px solid;"
></canvas>
<script>
  let canvas = document.getElementById("circle-canvas");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 80, 0, 2 * Math.PI, false);
  ctx.fillStyle = "blue";
  ctx.fill();
</script>

浏览器输出

一个圆形画布

在这里，我们结合使用 JavaScript 和 Canvas API，在画布内部创建了一个圆形。这段代码在 HTML 页面的 canvas 元素中创建了一个简单的绘图。

这个画布的 id 为 circle-canvas，尺寸为 200x200 像素。这样就在我们可以使用 JavaScript 进行绘图的表面上创建了一个画布。

我们使用了 canvas 元素的 getContext() 方法，并将其存储在 ctx 变量中。它允许我们访问绘图上下文并在画布上绘图。

在上面的例子中，

  • beginPath() - 创建一个新路径，任何后续的路径命令都将从这一点开始
  • arc() - 绘制一个圆形，其中， 圆形以 (100, 100) 为中心 圆形的半径为 80 像素 圆形以逆时针方向绘制，从 0 弧度开始，到 2*Math.PI 弧度结束
  • fillStyle - 设置圆形的填充颜色为蓝色
  • fill() - 用蓝色填充圆形
最后于 更新