在 HTML 中在图片上画点的几种方法

由 admin, 16 一月, 2025

html怎么在图片上画点

以下是在 HTML 中在图片上画点的几种方法：

解决思路：

使用 HTML5 的 <canvas> 元素：将图片绘制在 <canvas> 上，然后在 <canvas> 上绘制点。
使用绝对定位的 <div> 元素：将图片作为背景，在图片上方使用绝对定位的 <div> 元素来表示点。

方法一：使用 <canvas> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Points on Image using Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        window.onload = function() {
            // 获取 canvas 元素
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            // 创建一个新的 Image 对象
            var img = new Image();
            img.src = 'your-image.jpg';

            // 当图片加载完成后绘制图片和点
            img.onload = function() {
                // 绘制图片
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                // 绘制点，这里使用红色的点，坐标为 (100, 100)，半径为 5 像素
                ctx.beginPath();
                ctx.arc(100, 100, 5, 0, 2 * Math.PI);
                ctx.fillStyle ='red';
                ctx.fill();
            };
        };
    </script>
</body>
</html>

代码解释：

首先，在 HTML 中创建一个 <canvas> 元素，并设置其 id、width 和 height 属性。
在 JavaScript 中，使用 window.onload 确保页面元素加载完成。
获取 <canvas> 元素并使用 getContext('2d') 获取 2D 上下文。
创建一个 Image 对象并设置其 src 属性为所需图片的路径。
当图片加载完成（通过 onload 事件），使用 drawImage 方法将图片绘制到 <canvas> 上，第一个参数是图片对象，后面四个参数分别是 x 坐标、y 坐标、宽度和高度。
使用 beginPath 开始一个新的绘图路径，arc 方法绘制一个圆形（这里作为点），arc 方法的参数依次是圆心的 x 坐标、圆心的 y 坐标、半径、起始角度和结束角度（这里绘制一个完整的圆）。
使用 fillStyle 设置填充颜色，fill 方法填充圆形。

方法二：使用绝对定位的 <div> 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Points on Image using Divs</title>
    <style>
        #image-container {
            position: relative;
            display: inline-block;
        }
      .point {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</body>
<body>
    <div id="image-container">
        <img src="your-image.jpg" alt="Image" width="500" height="500">
        <div class="point" style="left: 100px; top: 100px;"></div>
    </div>
</body>
</html>

代码解释：

首先，使用一个 id 为 image-container 的 <div> 元素来包裹图片，设置其为 position: relative，这样内部的绝对定位元素将相对于它定位。
图片元素使用普通的 <img> 标签，并设置其 src、width 和 height 属性。
使用一个类名为 point 的 <div> 元素表示点，设置其为 position: absolute，使用 border-radius: 50% 使其呈现圆形，使用 width 和 height 控制大小，使用 background-color 设置颜色。
通过 style 属性设置该点的 left 和 top 坐标，以定位该点在图片上的位置。

两种方法各有优缺点，使用 <canvas> 可以更灵活地进行复杂的绘图操作，但对于简单的点标记，使用绝对定位的 <div> 可能更直观。你可以根据具体需求选择合适的方法。

需要注意的是，在使用第一种方法时，要确保图片的 src 路径正确，在使用第二种方法时，要根据图片的大小和位置合理调整点的 left 和 top 坐标。