js+canvas 监听点击扇形区域 事件

最新推荐文章于 2023-05-06 17:58:55 发布
最新推荐文章于 2023-05-06 17:58:55 发布
阅读量2.8k 收藏 7
点赞数
分类专栏： canvas 文章标签： canvas  监听点击扇形区域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20423863/article/details/90701917
版权

最近业务突发奇想用饼图当导航首页，于是就想到了利用canvas+js 监听 点击的扇形 跳转到对应的链接去。

废话不多说，先看图。

先划一个圆形和一个角度为60度的扇形(圆心100,100，半径100)，当然度数自己可以改，我为了简单先用60代替，下面代码中也是已60度为基础的。

1.实例化canvas

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        if (canvas.width  < window.innerWidth){
            canvas.width  = window.innerWidth;
        }

2.计算扇形的垂直距离y    直角三角形，角度为30度，半径为100，
        var y=100*Math.cos(Math.PI/6)
        var x=100*Math.sin(Math.PI/6)
        var xLocation=parseFloat(100)+parseFloat(x);
        var yLocation=parseFloat(100)+parseFloat(y);

3.划辅助线

//划辅助线（扇形左下角 A区域）
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(100,yLocation);
        ctx.moveTo(100,yLocation);
        ctx.lineTo(xLocation,yLocation);
        //设置绘制颜色
        ctx.fillStyle="blue";
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        //划辅助线（扇形右下角 B区域）
        ctx.beginPath();
        ctx.moveTo(200,100);
        ctx.lineTo(200,yLocation);
        ctx.moveTo(200,yLocation);
        ctx.lineTo(xLocation,yLocation);
        //设置绘制颜色
        ctx.fillStyle="blue";
        ctx.closePath();
        ctx.stroke();
        ctx.fill();

       //绘制整个圆
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(100,100,100,0*Math.PI/180,360*Math.PI/180);
        ctx.fillStyle = 'white';
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        //绘制60度的扇形，顺时针绘制
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(100,100,100,0*Math.PI/180,60*Math.PI/180);
        ctx.closePath();
        ctx.fillStyle = 'yellow';
        ctx.stroke();
        ctx.fill();
        
        
        ctx.fillStyle = "red";
        //设置或返回文本内容的当前字体属性
        ctx.font = "20px '微软雅黑'";
        //设置或返回文本内容的当前对齐方式
        ctx.textAlign = "left";
        //shadowBlur:模式级数
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowColor = "black";
        //fillText("要添加的文字",x0坐标，y0坐标)
        //在画布上绘制“被填充的”文本
        ctx.fillText("A",parseFloat(100)+parseFloat(10),yLocation-15);
        //在画布上绘制“被填充的”文本
        ctx.fillText("B",parseFloat(xLocation)+parseFloat(35),yLocation-15);

监听事件

canvas.addEventListener("click",function(e){
            var pos=getEventPosition(e);
            var count=0;
            //思路，4个步骤判断是否点击了扇形区域    
            //1：水平方向上:值  100<x<200
            if(parseFloat(100)<parseFloat(pos.x)&&parseFloat(pos.x)<parseFloat(200)){
                count++;
            }
            //2:斜方向：    值  100<y<yLocation
            if(parseFloat(100)<parseFloat(pos.y)&&parseFloat(pos.y)<parseFloat(yLocation) ){
                count++;
            }
            //3：右下角点击处的坐标到圆心的距离是否大于半径(计算如图（B）区域)
            if(Math.pow((parseFloat(pos.x)-100),2)+Math.pow((parseFloat(pos.y)-100),2)<10000){
                count++;
            }
            //4：计算左下角斜边长是否在等比例上(计算如图（A）区域)
            if((xLocation-100)/(pos.x-100)<(yLocation-100)/(pos.y-100)){
                count++;
            }
            
            if(count==4){
                alert("您点击了扇形！")
            }
        })

 

 

下面是完整代码，忘批评指正。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼图</title>
<script type="text/javascript">
    function getEventPosition(ev){
        var x,y;
        if(ev.layerX||ev.layerX==0){
            x=ev.layerX;
            y=ev.layerY;
        }else{
            x=ev.offsetX;
            y=ev.offsetY;
        }
        console.log("x:"+x+",y:"+y)
        return {x:x,y:y}
    }
    function init(){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        if (canvas.width  < window.innerWidth){
            canvas.width  = window.innerWidth;
        }
        
        //计算扇形的垂直距离y    直角三角形，角度为30度，半径为100，
        var y=100*Math.cos(Math.PI/6)
        var x=100*Math.sin(Math.PI/6)
        var xLocation=parseFloat(100)+parseFloat(x);
        var yLocation=parseFloat(100)+parseFloat(y);
        
        //划辅助线（扇形左下角 A区域）
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(100,yLocation);
        ctx.moveTo(100,yLocation);
        ctx.lineTo(xLocation,yLocation);
        //设置绘制颜色
        ctx.fillStyle="blue";
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        //划辅助线（扇形右下角 B区域）
        ctx.beginPath();
        ctx.moveTo(200,100);
        ctx.lineTo(200,yLocation);
        ctx.moveTo(200,yLocation);
        ctx.lineTo(xLocation,yLocation);
        //设置绘制颜色
        ctx.fillStyle="blue";
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        canvas.addEventListener("click",function(e){
            var pos=getEventPosition(e);
            var count=0;
            //思路，4个步骤判断是否点击了扇形区域    
            //1：水平方向上:值  100<x<200
            if(parseFloat(100)<parseFloat(pos.x)&&parseFloat(pos.x)<parseFloat(200)){
                count++;
            }
            //2:斜方向：    值  100<y<yLocation
            if(parseFloat(100)<parseFloat(pos.y)&&parseFloat(pos.y)<parseFloat(yLocation) ){
                count++;
            }
            //3：右下角点击处的坐标到圆心的距离是否大于半径(计算如图（B）区域)
            if(Math.pow((parseFloat(pos.x)-100),2)+Math.pow((parseFloat(pos.y)-100),2)<10000){
                count++;
            }
            //4：计算左下角斜边长是否在等比例上(计算如图（A）区域)
            if((xLocation-100)/(pos.x-100)<(yLocation-100)/(pos.y-100)){
                count++;
            }
            
            if(count==4){
                alert("您点击了扇形！")
            }
        })
        //绘制整个圆
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(100,100,100,0*Math.PI/180,360*Math.PI/180);
        ctx.fillStyle = 'white';
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        //绘制60度的扇形，顺时针绘制
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(100,100,100,0*Math.PI/180,60*Math.PI/180);
        ctx.closePath();
        ctx.fillStyle = 'yellow';
        ctx.stroke();
        ctx.fill();
        
        
        ctx.fillStyle = "red";
        //设置或返回文本内容的当前字体属性
        ctx.font = "20px '微软雅黑'";
        //设置或返回文本内容的当前对齐方式
        ctx.textAlign = "left";
        //shadowBlur:模式级数
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowColor = "black";
        //fillText("要添加的文字",x0坐标，y0坐标)
        //在画布上绘制“被填充的”文本
        ctx.fillText("A",parseFloat(100)+parseFloat(10),yLocation-15);
        //在画布上绘制“被填充的”文本
        ctx.fillText("B",parseFloat(xLocation)+parseFloat(35),yLocation-15);
    }
</script>
</head>
<body οnlοad="init()">
    <canvas id="canvas" height="500px"></canvas>
</body>
</html>

帅帅的帅
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现图片区域可点击大小随意改变(适用移动端)代码实例
10-16
主要介绍了js实现图片区域可点击大小随意改变(适用移动端)代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js图片区域点击，适用于移动端
08-16
js实现图片区域点击，适用于移动端，可以自定义区域进行操作点击，非canvas实现代码比较简单清晰！！！
js实现的点击div区域外隐藏div区域
10-25
主要介绍了通过js实现点击div区域外隐藏div区域，原理及示例代码如下
Canvas（2）及简单的点击监听事件
xiaoxiaojinglinger的博客
07-24 1155
Canvas（2）及简单的点击监听事件 onclick：点击监听事件 平移坐标系统：ctx.translate(*,*)； scale():改变图形大小（即缩放）(它除了改变图形大小之外，还会改变其他属性如线条宽度（即lineWidth）、左上角坐标等) rotate():旋转函数，通过指定的角度参数使元素相对原点进行旋转 它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 fillRect(*,*,*
Fabricjs对Canvas画布和对象的事件监听
BADAO_LIUMANG_QIZHI的博客
02-10 4006
场景 Fabricjs一个简单强大的Canvas绘图库快速入门： Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，怎样监听画布上鼠标按下、移动、抬起时的事件，以及画布上对象 被选中、被移动、被旋转、被加入和被移除的事件。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、画布的事.
Canvas 入门3 Click事件处理
编程圈子-谢厂节的博客
12-05 7300
传统的DOM的事件处理机制在Canvas里并不适应.Canvas是一个整体，无法给里面的某个图形增加Javascript事件。 由于事件只能达到Canvas元素这一层，所以，如果要识别点击发生在哪一个图形上，需要增加代码进行处理： 给Canvas绑定事件 事件发生时，检查事件对象的位置 检查哪些图形覆盖了该位置 给Canvas元素绑定事件 cvs = document.getE
canvas 中判断鼠标点击的位置是否处于图形中
nick_zhang的博客
04-25 1272
isPointInPath(x,y) 面向的对象是路径，所以对文字、fillRect()、strokeRect()不好使，用ctx.stroke()替代strokeRect()，用ctx.fill()替代fillRect();在ctx.beginPath() 之后，所绘制的所有路径都会被添加到这个路径集合里，isPointInPath(x,y) 方法判断的就是x、y 点是否在这个路径集合的所有路径里。注意，在下一次ctx.beginPath() 时，路径集合会被置空。
js 获取鼠标在画布的位置_请问在javascript中，鼠标在canvas里面点击，如何确定点击的位置？...
weixin_30146085的博客
12-29 897
展开全部html>Title*{margin:0;padding:0;}#my-canvas{border:1pxsolidred;}.active{background-color:#e61;color:#fff}画笔颜色：画笔宽度：橡皮擦：画笔的透明62616964757a686964616fe78988e69d8331333363373734度：/*颜色*/...
前端小功能: 绘制多边形，并判断某个点是否在区域内
dewei1281的博客
08-29 1074
canvas绘制不规则多边形，包涵里面的元素不能超出多边形。 canvas绘制多边形，并且判断某个点是否在区域内。 涉及canvas画点，画线，成面。 x,y坐标系，斜率，js拖拽等。 斜率:k=(y2-y1)/(x2-x1); canvas画点，画线，成面： // 绘制连接的折线 this.cxt.beginPath(); this.cxt.stro...
fabric.js 判断是否点击的是canvas中某个元素的子元素
weixin_35755823的博客
01-06 103
你可以使用 fabric.js 的 containsPoint 方法来判断点击的位置是否在某个元素的区域内。 例如，你可以这样判断点击的位置是否在某个圆形元素内： canvas.on('mouse:down', function(options) { var circle = new fabric.Circle({ radius: 50, left: 100, top:...
html5中监听canvas内部元素点击事件的三种方法
12-14
这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于...
使用JavaScript+canvas实现图片裁剪
12-11
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) {  var c
原生js+css3+canvas实现扇形特效
09-22
原生js+css3+canvas实现扇形特效，包括详细注解
html5+exif.js+canvas
12-30
实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(...
js+canvas实现简单扫雷小游戏
11-21
扫雷小游戏作为windows自带的一个小游戏，受到很多人的喜爱，今天我们就来尝试使用h5的canvas结合js来实现这个小游戏。 要写游戏，首先要明确游戏的规则，扫雷游戏是一个用鼠标操作的游戏，通过点击方块，根据方块的...
touch事件中的touches、targetTouches和changedTouches详解
啦啦啦啦
03-29 939
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时， ...
js小学生图区_js实现图片区域可点击大小随意改变(适用移动端)代码实例
weixin_39601641的博客
12-19 439
实现图片区域可点击，实际上使用map是可以的，但是适配效果并不好，图片只能是固定大小的值，而且点都被写死了。在这里，我使用的js基于canvas写的一个小工具。可以圈出你需要点击的部分，然后生成一串json，在预览页面就可以看见效果了；在实际应用中，只要用工具处理一下图片，再把数据存入数据库，就很方便了；使用工具时，先上传图片。然后就可以圈了，圈完一定要记得，点击保存数据，，，接着就可以预览了，预...
Angular响应式开发中报错Property ‘map‘ does not exist on type ‘Observable＜Response＞‘.引用rxjs也没用。
Pumily的脱发历程
07-18 2903
传送门，点击我！
【前端面试题】这些js功能你一定要学会
web全栈开发的博客
05-06 5514
如果图片资源不存在，那可以设置图片失败的占位图片。但是如果图片资源是存在的，只不过因为网络慢(资源在国外)，而导致图片加载失败的，应该是让图片重新加载，而不是失败一次就直接设置失败的占位图片。所以监听图片加载失败的时候，让图片重新加载。原理是：重新给图片src赋值时，会触发加载资源的动作，去重新加载图片资源。此时可以监听全局的加载失败事件，然后重新给图片的src赋值资源。
canvas动态绘制扇形区域并添加事件
最新发布
05-15
下面是一个示例代码，展示如何在 Canvas 中绘制扇形区域并添加事件监听器： ```html <canvas id="myCanvas" width="400" height="400"></canvas> ``` ```javascript var canvas = document.getElementById(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值