如何在页面上实现一个圆形的可点击区域？

最新推荐文章于 2023-02-02 16:53:59 发布

asltwhh

最新推荐文章于 2023-02-02 16:53:59 发布

阅读量396

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/hhhhhh__hh/article/details/116462113

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法1 使用border-radius

将radius设置为50%,则在元素高度和宽度相等的情况下，可以得到一个圆

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        border-radius: 50%;
        color: #000;
        font-size: 17px;
        margin: 100px auto;
        line-height: 100px;
        text-align: center;
      }
    </style>
    <script>
      window.onload = function () {
        var div = document.querySelector("#div");
        div.addEventListener("click", function () {
          alert("lalalalla");
        });
      };
    </script>
  </head>
  <body>
    <div id="div">可点击区域</div>
  </body>
</html>

canvas实现的两种方法：

方法1：

使用canvas画一个填充了制定颜色的圆，并且根据单像素判断的方法，如果发现当前点击的像素的颜色是我们指定的颜色，则触发回调事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #canvas {
        margin: 100px 0 0 200px;
      }
    </style>
    <script>
      window.onload = function () {
        // 1 获取画笔
        var canvas = document.querySelector("#canvas");
        canvas.style.backgroundColor = "#bfa";
        var ctx = canvas.getContext("2d");
        // 2 画圆
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(50, 50, 50, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
        ctx.closePath();
        ctx.fill();

        // 3 添加点击事件，如果所点击的像素的颜色是红色，则表明点到了该元素上
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        canvas.onclick = function (e) {
          e = e || window.e;
          let x = e.clientX - canvas.offsetLeft;
          let y = e.clientY - canvas.offsetTop;
          console.log(x, y);
          var color = getPxInfo(imageData, x, y);
          var targetColor = [255, 0, 0, 255];
          if (color[0] === 255) {
            alert("yes");
          }
        };

        // 获取相对于画布原点x,y处的像素点的颜色列表
        function getPxInfo(imageData, x, y) {
          var color = [];
          var data = imageData.data;
          var w = imageData.width;
          var h = imageData.height;
          color[0] = data[(y * w + x) * 4];
          color[1] = data[(y * w + x) * 4 + 1];
          color[2] = data[(y * w + x) * 4 + 2];
          color[3] = data[(y * w + x) * 4 + 3];

          return color;
        }
      };
    </script>
  </head>
  <body>
    <canvas id="canvas" width="100px" height="100px"></canvas>
  </body>
</html>

方法2：使用`ctx.isPointInPath(x, y)`

不使用像素的方法判断，使用canvas提供了ctx.isPointInPath(x, y)判断

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #canvas {
        margin: 100px 0 0 200px;
      }
    </style>
    <script>
      window.onload = function () {
        // 1 获取画笔
        var canvas = document.querySelector("#canvas");
        canvas.style.backgroundColor = "#bfa";
        var ctx = canvas.getContext("2d");
        // 2 画圆
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(50, 50, 50, 0 * (Math.PI / 180), 360 * (Math.PI / 180));
        ctx.closePath();
        ctx.fill();
        

        // 3 添加点击事件，如果所点击点在当前路径中，则表明点击到了该圆上
        canvas.onclick = function (e) {
          e = e || window.e;
          let x = e.clientX - canvas.offsetLeft;
          let y = e.clientY - canvas.offsetTop;
          if (ctx.isPointInPath(x, y)) {
            alert("yes");
          }
        };
      };
    </script>
  </head>
  <body>
    <canvas id="canvas" width="100px" height="100px"></canvas>
  </body>
</html>

还有一个方法参考：这里，使用html实现

asltwhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在页面上实现一个圆形的可点击区域？

方法1 使用border-radius将radius设置为50%,则在元素高度和宽度相等的情况下，可以得到一个圆<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=
复制链接

扫一扫