初始化数据可视化项目

2025-04-27 08:48:28 +08:00
commit 1984d69e6d
41 changed files with 325354 additions and 0 deletions
--- a/experiment_2/task2.html
+++ b/experiment_2/task2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Canvas</title>
+</head>
+
+<body>
+    <canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">
+    </canvas>
+    <script>
+        // 获取Canvas元素并创建2D绘图上下文
+        var c = document.getElementById("myCanvas");
+        var ctx = c.getContext("2d");
+
+        // 绘制一个橙色填充、黑色边框的圆形
+        ctx.beginPath();
+        ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 圆心(100,75)，半径50，完整圆周
+        ctx.fillStyle = "orange"; // 设置填充颜色为橙色
+        ctx.strokeStyle = 'black'; // 设置边框颜色为黑色
+        ctx.fill(); // 填充圆形
+        ctx.stroke(); // 绘制圆形边框
+
+        // 绘制一个绿色填充、红色边框的矩形
+        ctx.beginPath();
+        ctx.rect(30, 125, 150, 30); // 矩形左上角坐标(30,125)，宽度150，高度30
+        ctx.fillStyle = "green"; // 设置填充颜色为绿色
+        ctx.strokeStyle = 'red'; // 设置边框颜色为红色
+        ctx.fill(); // 填充矩形
+        ctx.stroke(); // 绘制矩形边框
+
+        // 绘制一个深蓝色填充、紫色边框的竖直矩形
+        ctx.beginPath();
+        ctx.rect(30, 10, 20, 115); // 矩形左上角坐标(30,10)，宽度20，高度115
+        ctx.fillStyle = "navy"; // 设置填充颜色为深蓝色
+        ctx.strokeStyle = 'purple'; // 设置边框颜色为紫色
+        ctx.fill(); // 填充矩形
+        ctx.stroke(); // 绘制矩形边框
+    </script>
+</body>
+
+</html>