<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Object Hit Test</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var circle1 = { x: 100, y: 100, r: 50, color: "#FF0000" }; var circle2 = { x: 200, y: 200, r: 80, color: "#0000FF" }; ctx.beginPath(); ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2 * Math.PI); ctx.fillStyle = circle1.color; ctx.fill(); ctx.beginPath(); ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2 * Math.PI); ctx.fillStyle = circle2.color; ctx.fill(); var distance = Math.sqrt(Math.pow(circle1.x - circle2.x, 2) + Math.pow(circle1.y - circle2.y, 2)); if (distance < circle1.r + circle2.r) { console.log("Collision detected!"); } </script> </body> </html>对这段代码进行注释
时间: 2023-06-13 15:09:02 浏览: 256
HTML中的<meta>标签的使用详解
5星 · 资源好评率100%
```
<!DOCTYPE html> //声明文档类型为HTML5
<html> //HTML文档开始标签
<head> //头部标签
<meta charset="UTF-8"> //声明字符编码为UTF-8
<title>Object Hit Test</title> //设置页面标题为 "Object Hit Test"
</head>
<body> //页面主体标签开始
<canvas id="canvas" width="400" height="400"></canvas> //创建一个画布元素,并设置画布的宽高为400
<script> //JavaScript脚本标签开始
var canvas = document.getElementById("canvas"); //获取画布元素
var ctx = canvas.getContext("2d"); //获取画布的2D绘图上下文
//定义两个圆形对象(circle1和circle2)
var circle1 = {
x: 100, //圆心的x坐标
y: 100, //圆心的y坐标
r: 50, //圆的半径
color: "#FF0000" //圆的填充颜色
};
var circle2 = {
x: 200,
y: 200,
r: 80,
color: "#0000FF"
};
//绘制圆形
ctx.beginPath(); //开始路径
ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2 * Math.PI); //绘制圆形路径
ctx.fillStyle = circle1.color; //设置圆形填充颜色
ctx.fill(); //填充圆形路径
ctx.beginPath(); //开始路径
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2 * Math.PI); //绘制圆形路径
ctx.fillStyle = circle2.color; //设置圆形填充颜色
ctx.fill(); //填充圆形路径
//计算两个圆形之间的距离
var distance = Math.sqrt(Math.pow(circle1.x - circle2.x, 2) + Math.pow(circle1.y - circle2.y, 2));
//如果两个圆形之间的距离小于两个圆形半径之和,则说明发生碰撞
if (distance < circle1.r + circle2.r) {
console.log("Collision detected!"); //在控制台输出 "Collision detected!"
}
</script> //JavaScript脚本标签结束
</body> //页面主体标签结束
</html> //HTML文档结束标签
阅读全文