body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}html, body{ }h1 { font-size:1.5em; font-weight:bold;}h2 { font-size:1.4em; font-weight:bold;}h3 { font-size:1.3em; font-weight:bold;}h4 { font-size:1.2em; font-weight:bold;}h5 { font-size:1.1em; font-weight:bold;}h6 { font-size:1.0em; font-weight:bold;}img { border:0; max-width: 100%;}blockquote { margin-top:0px; margin-bottom:0px;}table { border-collapse:collapse; border:1px solid #bbbbbb;}td { border-collapse:collapse; border:1px solid #bbbbbb;}HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>HTML5</title>
<!-- WinJS 引用 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- HTML5 引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>此处显示内容</p>
<canvas id="canvas1" width="320" height="200">
您的浏览器不支持canvas 元素
</canvas>
<canvas id="canvas2" width="320" height="200">
您的浏览器不支持canvas 元素
</canvas>
<div id="div1" onmousemove="getCo(event)" onmouseout="clearCo()" style="width:300px;height:200px;border:1px solid green" >
<div id="xycoordiv"></div>
</div>
</body>
<script>
//先找到canvas这个画布
var c = document.getElementById("canvas1");
//获得对象，这个对象是用来画图的
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";
//开始绘图了，通过fillRect(),四个参数，开始的坐标，大小
ctx.fillRect(150, 150, 300, 200);//这是输出的一个方形
var c1 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
//在绘图之前通知canvas 我要开始绘图了
ctx1.beginPath();
//Math.PI获得圆周率,会出一个半圆，*2 获得一个圆
ctx1.arc(100, 100, 15, 0, Math.PI * 2, true);
//闭合 圆
ctx1.closePath();
ctx1.fillStyle = "green";
ctx1.fill();
function getCo(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById("xycoordiv").innerHTML = "当前坐标是：" + x + ',' + y ;
}
function clearCo() {
document.getElementById("xycoordiv").innerHTML = "";
}//获取鼠标的坐标
</script>
</html>
来自为知笔记(Wiz)
![2022-01-21：完美矩形。 给你一个数组 rectangles ，其中 rectangles[i] = [xi, yi, ai, bi] 表示一个坐标轴平行的矩形。这个矩形的左下顶点是 (xi,](https://www.kunjuke.com/file/css/thumb/11.jpg/280-180.jpg)
![2022-10-09：我们给出了一个（轴对齐的）二维矩形列表 rectangles 。 对于 rectangle[i] = [x1, y1, x2, y2]，其中（x1，y1）是矩形 i 左下角的坐](https://www.kunjuke.com/file/css/thumb/5.jpg/280-180.jpg)
