各种计算还挺繁琐的, 关键点在角度的计算, 根据鼠标位置, 利用atan(y/x) 得到反正切值 , 角度  (tan输入的是r和x围成的那个角，输出的是y/x。反tan就是输入y/x输出角。)

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="800" height="950" style="border:1px solid #d3d3d3;margin-top:10px">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const PI = Math.PI;

const number = 4;//画4个外圆；

const reduceRadio = 15;//递减半径；

const maxRadius = 80;//最大半径

const minRadio = maxRadius-number*reduceRadio;

const translateX = 100;//canvas移动位置

const translateY = 100;

//canvas移动位置

ctx.translate(translateX,translateY);

//画所有圆

function drawAllOuterCircle(number,reduceRadio,maxRadius){  

  //画虚线

  ctx.setLineDash([2,2]);

  for(let i=0;i<number;i++){

    ctx.beginPath();

    //半径递减

    ctx.arc(0,0, maxRadius-i*reduceRadio, 0, 2*PI);

    if(i+n == 4){

      ctx.strokeStyle = 'red';

    }else{

      ctx.strokeStyle = 'black';

    }

    ctx.stroke();

    ctx.closePath();

  }

  //重置

  ctx.restore();

  //最里面小圆

  ctx.beginPath();

  ctx.arc(0,0,maxRadius-number*reduceRadio,0,2*PI);

  ctx.fillStyle="red";

  ctx.fill();

  ctx.closePath();

  ctx.restore();

}

drawAllOuterCircle(number,reduceRadio,maxRadius);

 

//画分割直线

const lineNum = 8;//分割线条数

const minAngel = 2*PI/lineNum;//最小角度

function drawSplitLine(lineNum,maxRadius){

  for(let i=0;i<lineNum;i++){

    ctx.setLineDash([]);

    ctx.beginPath();

    ctx.moveTo(0,0);

    ctx.lineTo(0,maxRadius);

    ctx.strokeStyle = 'black';

    ctx.stroke();

    //旋转

    ctx.rotate(2*PI/lineNum);

    ctx.closePath();

  }

}

drawSplitLine(lineNum,maxRadius);

 

//画阴影部分

function drawShadowPanel(ceilMouseRadio,floorMouseRadio,ceilMouseAngel,floorMouseAngel){

  //清屏

  ctx.beginPath();

  ctx.moveTo(0,0);

  ctx.arc(0,0,ceilMouseRadio+reduceRadio,0,2*PI);

  ctx.fillStyle = "white";

  ctx.fill();

  ctx.closePath();

  //调试: 先画一个大的绿色扇形

  ctx.beginPath();

  ctx.moveTo(0,0);

  ctx.arc(0,0,ceilMouseRadio,floorMouseAngel,ceilMouseAngel);

  ctx.fillStyle = "green";

  ctx.fill();

  ctx.closePath();

  //再画一个小的白色扇形 覆盖 大的扇形, 视觉上形成一个弧形

  ctx.beginPath();

  ctx.moveTo(0,0);

  ctx.arc(0,0,floorMouseRadio,floorMouseAngel,ceilMouseAngel);

  ctx.fillStyle = "white";

  ctx.fill();

  ctx.closePath();

}

const maxN = (maxRadius-minRadio)/reduceRadio;

var n;

//获取ceilMouseRadio,floorMouseAngel,ceilMouseAngel

//获取canvas 的 位移

const canvasX = canvas.getBoundingClientRect().left + document.documentElement.scrollLeft +translateX;

const canvasY = canvas.getBoundingClientRect().top + document.documentElement.scrollTop +translateY;

function getMouseDetail(mouseX,mouseY){

  //利用勾股定理 算出鼠标 离 canvas原点的距离

  let mouseRadio = Math.sqrt( Math.pow(mouseX-canvasX, 2) + Math.pow(mouseY-canvasY, 2));

  //因为 cavas原点已经移动到 100 100, 判断鼠标是否在圆圈内

  if(mouseRadio>maxRadius||mouseRadio<=minRadio){

    return {ceilMouseRadio:0,floorMouseRadio:0,floorMouseAngel:0,ceilMouseAngel:0};

  }

  //计算鼠标半径和最小半径的比例,画阴影块的大小半径   reduceRadio:15

  n = Math.ceil((mouseRadio-minRadio)/reduceRadio);

  let ceilMouseRadio = minRadio+n*reduceRadio;

  let floorMouseRadio = minRadio+(n-1)*reduceRadio;

  //角度

  let mouseAngel;

  if(mouseX-canvasX<0){

    //计算当前鼠标 相对原点的的弧度值 , x轴 顺时针

    // 比如 Math.atan(1)/Math.PI*180 是 45度

    mouseAngel = Math.atan((mouseY-canvasY)/(mouseX-canvasX)) + PI;

  }else{

    mouseAngel = Math.atan((mouseY-canvasY)/(mouseX-canvasX));

  }

  // 计算当前鼠标 有多少个象限

  let m = Math.ceil(mouseAngel/minAngel);

  let floorMouseAngel = (m-1)*minAngel;

  let ceilMouseAngel = m*minAngel;

  return {ceilMouseRadio,floorMouseRadio,floorMouseAngel,ceilMouseAngel};

}

//监听事件画图

canvas.addEventListener('mousemove', (e)=>{

  let mouseX = e.pageX;

  let mouseY = e.pageY;

  getMouseDetail(mouseX,mouseY);

  let mouseDetail = getMouseDetail(mouseX,mouseY);

  let {ceilMouseRadio,floorMouseRadio,floorMouseAngel,ceilMouseAngel} = mouseDetail;

  if(ceilMouseRadio){

    //先画阴影,

    drawShadowPanel(ceilMouseRadio,floorMouseRadio,ceilMouseAngel,floorMouseAngel);

    //再画圆圈

    drawAllOuterCircle(number,reduceRadio,maxRadius);

    drawSplitLine(lineNum,maxRadius);

  }

});

</script>

</body>

</html>

链接

canvas - 圆圈内 hover 高亮 效果的更多相关文章

  1. canvas - 圆圈内 hover效果

    链接

  2. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  3. CSS实现输入框的高亮效果-------Day50

    又到周末了,这一天天过的真快,明天应该回老家了.不知道会不会有机会进行编写.尽量争取吧,实在不想就这样间断.假设说从前会一天天无聊到爆,那如今自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可 ...

  4. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  5. cesium 3dtiles模型单体化点击高亮效果

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. c ...

  6. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  7. UITableView或UIScrollVIew上的UIButton的高亮效果

    UITableView或UIScrollVIew上的UIButton的高亮效果 原文地址:http://www.jianshu.com/p/b4331f06bd34 最近做项目的时候发现,UIScro ...

  8. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  9. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

随机推荐

  1. golang SQLite3性能测试

    SQLite是个小型的数据库,很简洁,即支持文件也支持内存,比较适合小型的独立项目,在没有网络的时候做一些复杂的关系数据存储和运算. 为了考察性能做10M(1000万)条记录的测试,测试机4CPU.8 ...

  2. HDU1165： Eddy's research II（递推）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1165 果断不擅长找规律啊,做这种题静不下心来. Ackermann function can be def ...

  3. if 条件判断

    逻辑判断的布尔值(true&false) 1.逻辑值(bool)用来表示诸如:对与错,真与假,非于空等概念. 2.逻辑值包含了两个值:--true:表示非空的量(比如:string,tuple ...

  4. 【转】XML的几种读写

    XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖于内 ...

  5. Django-进阶之路--信号

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  6. Java并发（6）：concurrent包中的Copy-On-Write容器

    一. concurrent包介绍 在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,而当针对高质量Java多线程并发程序设计时,为防止死蹦等现象的出现,比如使用java ...

  7. 和为定值的m个数

    和为定值的m个数 np 问题(时间复杂度o(2**n)) code1: 暴力递归 解决 只有正数的情况 class Solution { private List<List<Integer ...

  8. HDOJ 1501 Zipper 【简单DP】

    HDOJ 1501 Zipper [简单DP] Problem Description Given three strings, you are to determine whether the th ...

  9. 【Java】仿真qq尝试：用户注册（三）

    需求: 实现用户名和密码存入数据库. 思路: 1.连接数据表用静态加载块 2.crud写成4个静态方法 具体流程: from:https://www.tutorialspoint.com/jdbc/j ...

  10. SQL注入导图

    本图来自信安之路学生渗透小组@辽宁-web-TwoDog, 博主觉得这张图画的很好,所以贴在这里提供参考!