各种计算还挺繁琐的, 关键点在角度的计算, 根据鼠标位置, 利用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. R语言seq()函数用法

    1.seq() 用来生成一组数字的函数. Usage: ## Default S3 method:seq(from = 1, to = 1, by = ((to - from)/(length.out ...

  2. 转：zero length array问题

    单看这文章的标题,你可能会觉得好像没什么意思.你先别下这个结论,相信这篇文章会对你理解C语言有帮助.这篇文章产生的背景是在微博上,看到@Laruence同学出了一个关于C语言的题,微博链接.微博截图如 ...

  3. APP 自动化测试封装结构模式

    原文出处http://www.toutiao.com/a6268089772108333314/ 做过UI自动化测试同学,都会深深体会几个痛点:维护量大.适配量大.编写代码巨大等.基于这些问题,大家都 ...

  4. django-ORM复习补充

    建表 class Author(models.Model): name = models.CharField(max_length=32) age = models.IntegerField() # ...

  5. Node.js学习笔记（3）：NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

  6. 错误：为 Web 项目“XXX”配置的 URL“http://localhost/”的网站同时存在于本地 IIS Web 服务器和 IIS Express Web 服务器上。您需要使用 IIS 管理器在 IIS 中更改此网站的绑定。

    解决方法: 用记事本打开MVC网站的项目文件(*.csproj),滚动条拉到最下,找到这两个节点: <UseIIS>True</UseIIS> <AutoAssignPo ...

  7. ubuntu 配置tomcat 实测成功

    https://blog.csdn.net/qq_24091555/article/details/75077781

  8. VSCode代码格式化自动换行问题

    打开VS设置,添加如下代码 "vetur.format.defaultFormatter.html": "js-beautify-html", "ve ...

  9. SDWebImage 加载Https自签名证书时的图片问题

    你是否遇到了这种情况,好不容易把自签名HTTPS证书配置好了,访问https接口也成功了,但是图片加载不出来? 传了SDWebImageAllowInvalidSSLCertificates 还是没效 ...

  10. with as （cte common table expression） 公共表表达式

    SQL中 with as 的用法——使用公用表表达式(CTE)  公用表表达式 (CTE) 可以认为是在单个 SELECT.INSERT.UPDATE.DELETE 或 CREATE VIEW 语句的 ...