HTML Canvas 是HTML5中的一个重要特性，它允许我们使用JavaScript在网页上绘制图形，并且可以实现交互效果。在本篇博客中，我们将学习如何使用HTML Canvas来创建交互式图形。
准备工作
在开始之前，确保你已经具备HTML和基本的JavaScript知识。另外，你需要一个文本编辑器和一个现代的Web浏览器。
创建Canvas
首先，我们需要在HTML中创建一个Canvas元素。在<body>标签中插入以下代码：
<canvas id="myCanvas" width="500" height="500"></canvas>
我们给这个Canvas元素设置了一个id属性和宽高属性。这里设置的宽高属性表示Canvas的宽度和高度都是500像素。
现在我们需要在JavaScript中获取这个Canvas元素，并保存到一个变量中。在<script>标签中，插入以下代码：
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
这段代码将获取我们刚刚创建的Canvas元素，并将其上下文保存到一个变量中。上下文是我们进行绘制操作所需要的对象。
绘制基本形状
接下来，我们可以开始绘制一些基本的形状，比如矩形和圆形。在<script>标签中，插入以下代码：
// 绘制矩形
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);
// 绘制圆形
context.beginPath();
context.arc(250, 250, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
这段代码首先设置了画笔的颜色，然后使用fillRect()方法绘制一个红色的矩形。fillRect()方法需要提供起始点的x、y坐标以及矩形的宽度和高度。
接着，我们使用beginPath()方法开始绘制圆形，并使用arc()方法指定圆形的中心坐标、半径和起始角度和结束角度。最后使用fill()方法填充圆形。
添加交互效果
通过JavaScript，我们可以为Canvas添加交互效果，比如点击事件和移动事件。在<script>标签中，插入以下代码：
canvas.addEventListener("click", function(event) {
let x = event.clientX - canvas.offsetLeft;
let y = event.clientY - canvas.offsetTop;
if (context.isPointInPath(x, y)) {
alert("点击了圆形！");
}
});
canvas.addEventListener("mousemove", function(event) {
let x = event.clientX - canvas.offsetLeft;
let y = event.clientY - canvas.offsetTop;
if (context.isPointInPath(x, y)) {
canvas.style.cursor = "pointer";
} else {
canvas.style.cursor = "default";
}
});
这段代码给Canvas绑定了点击事件和移动事件。当点击Canvas时，我们获取鼠标点击的坐标，并使用isPointInPath()方法判断这个坐标是否在圆形上。如果是，我们弹出一个提示框。
当鼠标移动到Canvas上时，我们同样获取鼠标的坐标，并使用isPointInPath()方法判断这个坐标是否在圆形上。如果是，我们将鼠标的样式改为手型，表示可以点击。
运行效果
现在，我们可以将这个HTML代码保存为一个HTML文件，在浏览器中打开它，你将看到一个有一个红色矩形和一个蓝色圆形的画布。当你点击圆形时会弹出一个提示框，当你把鼠标放在圆形上时，鼠标将变为手型。
到此为止，我们通过HTML Canvas成功绘制了一个交互式图形。希望这篇博客对你有所帮助！
本文来自极简博客，作者：破碎星辰，转载请注明原文链接：使用HTML Canvas绘制交互式图形
