上查看所有课程
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 在 canvas 中创建一个圆形。此代码使用 HTML 页面中的 canvas 元素创建一个简单的绘图。
该 canvas 的 id 为 circle-canvas，尺寸为 200x200 像素。这创建了一个表面，我们可以在其上使用 JavaScript 进行绘制。
我们使用了 canvas 元素的 getContext() 方法并将其存储在 ctx 变量中。它允许我们访问绘图上下文并在 canvas 上绘制。
在上面的例子中：
beginPath()- 创建一个新路径，任何后续的路径命令将从此处开始arc()- 绘制一个圆形，其中，
圆形以 (100, 100) 为中心
圆形半径为 80 像素
圆形以逆时针方向绘制，覆盖整个圆周，从 0 弧度开始，到 2*Math.PI 弧度结束fillStyle- 将圆形的填充颜色设置为蓝色fill()- 用蓝色填充圆形