canvas实现圆轨滑动

最新推荐文章于 2023-12-15 15:02:09 发布
最新推荐文章于 2023-12-15 15:02:09 发布
阅读量654 收藏 2
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45939676/article/details/127226462
版权

圆轨滑动gif:
请添加图片描述

1.初始化配置

// 基础配置
let start = 0;
let end = (5 / 3) * Math.PI;
let colorList = ["#55e3fe", "#2f87fc", "#343eeb"];
let arcWidth = "30"; //圆轨尺寸
let arcRadius = 180; // 圆轨半径
let lineRadius = 140; //虚线半径
let startTrack = false; // 开始节点是否开始运动
let endTrack = false; // 结束节点是否开始运动
let canvas = document.querySelector("#test");
let ratioW = Math.round(canvas.width / parseInt(canvas.style.width)); // 宽度占比
let ratioH = Math.round(canvas.height / parseInt(canvas.style.height)); // 高度占比
let x0 = Math.round(canvas.width / 2); //中心x轴坐标
let y0 = Math.round(canvas.height / 2); //中心y轴坐标
let lrw = Math.round(arcWidth / 2);
var ctx = canvas.getContext("2d");
var grad = null; // 边框渐变渲染只能够进行线性渲染
let startNodeX = 0, //开始节点X轴坐标
  startNodeY = 0, //开始节点Y轴坐标
  endNodeX = 0, //结束节点X轴坐标
  endNodeY = 0; //结束节点Y轴坐标

2.开始绘制
2.1 获取开始节点，结束节点的坐标

startNodeX = Math.round(x0 + arcRadius * Math.cos(start)); //开始节点X轴坐标
startNodeY = Math.round(y0 + arcRadius * Math.sin(start)); //开始节点Y轴坐标
endNodeX = Math.round(x0 + arcRadius * Math.cos(end)); //结束节点X轴坐标
endNodeY = Math.round(y0 + arcRadius * Math.sin(end)); //结束节点Y轴坐标

2.2 处理渐变颜色

if (start != end && startNodeX == endNodeX && startNodeY == endNodeY) {
   grad = ctx.createLinearGradient(
     startNodeX,
     startNodeY,
     x0 + (x0 - startNodeX),
     y0 + (y0 - startNodeX)
   );
 } else {
   grad = ctx.createLinearGradient(
     startNodeX,
     startNodeY,
     endNodeX,
     endNodeY
   );
   grad.addColorStop(0, colorList[0]);
   grad.addColorStop(0.5, colorList[1]);
   grad.addColorStop(1, colorList[2]);
 }

3.开始绘制

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(0, 0); //坐标定位至0,0处
// 1.背景颜色
ctx.fillStyle = "#040e31";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.setLineDash([1, 0]);
// 2.底部透明圆环
ctx.beginPath();
ctx.lineWidth = arcWidth;
ctx.strokeStyle = "#ccdffb55";
ctx.arc(x0, y0, arcRadius, 0, 2 * Math.PI); //绘制一个完整的圆
ctx.stroke();
// 3.渐变圆弧
ctx.beginPath();
ctx.lineWidth = arcWidth;
ctx.strokeStyle = grad;
ctx.arc(x0, y0, arcRadius, start, end);
ctx.stroke();
// 4.灰色虚细线
ctx.beginPath();
ctx.lineWidth = "20";
ctx.setLineDash([3, 8]);
ctx.strokeStyle = grad;
ctx.arc(x0, y0, lineRadius, start, end);
ctx.stroke();
// 5.渐变虚细线
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "#ccdffb55";
// 设置虚线排列
ctx.arc(x0, y0, lineRadius, end, start); //绘制一个完整的圆
ctx.stroke();
// 6.画圆弧两端的图标
ctx.setLineDash([1, 0]);
// 开始节点
ctx.beginPath();
ctx.lineWidth = lrw + "";
ctx.fillStyle = colorList[0];
ctx.arc(startNodeX, startNodeY, lrw, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
// 结束节点
ctx.beginPath();
ctx.fillStyle = colorList[2];
ctx.arc(endNodeX, endNodeY, lrw, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
if (startTrack) {
  ctx.setLineDash([3, 4]);
  // 开始节点
  ctx.beginPath();
  ctx.lineWidth = lrw - 8 + "";
  ctx.strokeStyle = "#ffffff";
  ctx.arc(startNodeX, startNodeY, lrw - 5, 0, 2 * Math.PI);
  ctx.stroke();
}
if (endTrack) {
  ctx.setLineDash([3, 4]);
  // 结束节点
  ctx.beginPath();
  ctx.lineWidth = lrw - 8 + "";
  ctx.strokeStyle = "#ffffff";
  ctx.arc(endNodeX, endNodeY, lrw - 5, 0, 2 * Math.PI);
  ctx.stroke();
}

4.以上是静态canvas圆环，若需要沿着圆轨滑动，则需要使用鼠标监听事件

// 画布鼠标按下事件
 canvas.addEventListener("mousedown", function (e) {
   let points = windowToCanvas(canvas, e.clientX, e.clientY);
   let startDis = distance(points.x, points.y, startNodeX, startNodeY);
   let endDis = distance(points.x, points.y, endNodeX, endNodeY);
   if (lrw > startDis) {
     startTrack = true;
     ctx.setLineDash([3, 4]);
     // 开始节点
     ctx.beginPath();
     ctx.lineWidth = lrw - 8 + "";
     ctx.strokeStyle = "#ffffff";
     ctx.arc(startNodeX, startNodeY, lrw - 5, 0, 2 * Math.PI);
     ctx.stroke();
   }
   if (lrw > endDis) {
     endTrack = true;
     ctx.setLineDash([3, 4]);
     // 结束节点
     ctx.beginPath();
     ctx.lineWidth = lrw - 8 + "";
     ctx.strokeStyle = "#ffffff";
     ctx.arc(endNodeX, endNodeY, lrw - 5, 0, 2 * Math.PI);
     ctx.stroke();
   }
 });
 // 画布鼠标松开事件
 canvas.addEventListener("mouseup", function (e) {
   if (startTrack) {
     ctx.setLineDash([1, 0]);
     // 开始节点
     ctx.beginPath();
     ctx.lineWidth = lrw + "";
     ctx.fillStyle = colorList[0];
     ctx.arc(startNodeX, startNodeY, lrw, 0, 2 * Math.PI);
     ctx.fill();
     ctx.closePath();
   }
   if (endTrack) {
     ctx.setLineDash([1, 0]);
     // 结束节点
     ctx.beginPath();
     ctx.lineWidth = lrw + "";
     ctx.fillStyle = colorList[2];
     ctx.arc(endNodeX, endNodeY, lrw, 0, 2 * Math.PI);
     ctx.fill();
     ctx.closePath();
   }
   startTrack = false;
   endTrack = false;
 });
 // 画布鼠标移动事件
 canvas.addEventListener("mousemove", function (e) {
   // 节点运动轨迹
   if (startTrack || endTrack) {
     let points = windowToCanvas(canvas, e.clientX, e.clientY);
     let angle = vectorAngle([0, 0], [x0 - points.x, y0 - points.y]);
     // 开始节点
     if (startTrack) start = angle;
     // 结束节点
     if (endTrack) end = angle;
     init();
   }
 });

5.辅助函数

// 两点之间的距离
function distance(x1, y1, x2, y2) {
  let squareSum = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
  return Math.round(Math.sqrt(squareSum));
}
// 求以下两个向量之间的角度
function vectorAngle(x, y) {
  let angle = Math.atan2(x[1] - y[1], x[0] - y[0]);
  return angle;
}

/** 获取鼠标在canvas上的坐标**/
function windowToCanvas(canvas, x, y) {
  let rect = canvas.getBoundingClientRect();
  return {
    x: Math.round((x - rect.left * (canvas.width / rect.width)) * ratioW),
    y: Math.round(
      (y - rect.top * (canvas.height / rect.height)) * ratioH
    ),
  };
}

总体代码如下：

<!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>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <canvas
      id="test"
      width="800"
      height="800"
      style="width: 400px; height: 400px"
    ></canvas>
    <script>
      // 基础配置
      let start = 0;
      let end = (5 / 3) * Math.PI;
      let colorList = ["#55e3fe", "#2f87fc", "#343eeb"];
      let arcWidth = "30"; //圆轨尺寸
      let arcRadius = 180; // 圆轨半径
      let lineRadius = 140; //虚线半径
      let startTrack = false; // 开始节点是否开始运动
      let endTrack = false; // 结束节点是否开始运动
      let canvas = document.querySelector("#test");
      let ratioW = Math.round(canvas.width / parseInt(canvas.style.width)); // 宽度占比
      let ratioH = Math.round(canvas.height / parseInt(canvas.style.height)); // 高度占比
      let x0 = Math.round(canvas.width / 2); //中心x轴坐标
      let y0 = Math.round(canvas.height / 2); //中心y轴坐标
      let lrw = Math.round(arcWidth / 2);
      var ctx = canvas.getContext("2d");
      var grad = null; // 边框渐变渲染只能够进行线性渲染
      let startNodeX = 0, //开始节点X轴坐标
        startNodeY = 0, //开始节点Y轴坐标
        endNodeX = 0, //结束节点X轴坐标
        endNodeY = 0; //结束节点Y轴坐标

      // 开始绘制
      init();

      // 画布鼠标按下事件
      canvas.addEventListener("mousedown", function (e) {
        let points = windowToCanvas(canvas, e.clientX, e.clientY);
        let startDis = distance(points.x, points.y, startNodeX, startNodeY);
        let endDis = distance(points.x, points.y, endNodeX, endNodeY);
        if (lrw > startDis) {
          startTrack = true;
          ctx.setLineDash([3, 4]);
          // 开始节点
          ctx.beginPath();
          ctx.lineWidth = lrw - 8 + "";
          ctx.strokeStyle = "#ffffff";
          ctx.arc(startNodeX, startNodeY, lrw - 5, 0, 2 * Math.PI);
          ctx.stroke();
        }
        if (lrw > endDis) {
          endTrack = true;
          ctx.setLineDash([3, 4]);
          // 结束节点
          ctx.beginPath();
          ctx.lineWidth = lrw - 8 + "";
          ctx.strokeStyle = "#ffffff";
          ctx.arc(endNodeX, endNodeY, lrw - 5, 0, 2 * Math.PI);
          ctx.stroke();
        }
      });
      // 画布鼠标松开事件
      canvas.addEventListener("mouseup", function (e) {
        if (startTrack) {
          ctx.setLineDash([1, 0]);
          // 开始节点
          ctx.beginPath();
          ctx.lineWidth = lrw + "";
          ctx.fillStyle = colorList[0];
          ctx.arc(startNodeX, startNodeY, lrw, 0, 2 * Math.PI);
          ctx.fill();
          ctx.closePath();
        }
        if (endTrack) {
          ctx.setLineDash([1, 0]);
          // 结束节点
          ctx.beginPath();
          ctx.lineWidth = lrw + "";
          ctx.fillStyle = colorList[2];
          ctx.arc(endNodeX, endNodeY, lrw, 0, 2 * Math.PI);
          ctx.fill();
          ctx.closePath();
        }
        startTrack = false;
        endTrack = false;
      });
      // 画布鼠标移动事件
      canvas.addEventListener("mousemove", function (e) {
        // 节点运动轨迹
        if (startTrack || endTrack) {
          let points = windowToCanvas(canvas, e.clientX, e.clientY);
          let angle = vectorAngle([0, 0], [x0 - points.x, y0 - points.y]);
          // 开始节点
          if (startTrack) start = angle;
          // 结束节点
          if (endTrack) end = angle;
          init();
        }
      });
      // 绘制画布函数
      function init() {
        startNodeX = Math.round(x0 + arcRadius * Math.cos(start)); //开始节点X轴坐标
        startNodeY = Math.round(y0 + arcRadius * Math.sin(start)); //开始节点Y轴坐标
        endNodeX = Math.round(x0 + arcRadius * Math.cos(end)); //结束节点X轴坐标
        endNodeY = Math.round(y0 + arcRadius * Math.sin(end)); //结束节点Y轴坐标
        if (start != end && startNodeX == endNodeX && startNodeY == endNodeY) {
          grad = ctx.createLinearGradient(
            startNodeX,
            startNodeY,
            x0 + (x0 - startNodeX),
            y0 + (y0 - startNodeX)
          );
        } else {
          grad = ctx.createLinearGradient(
            startNodeX,
            startNodeY,
            endNodeX,
            endNodeY
          );
          grad.addColorStop(0, colorList[0]);
          grad.addColorStop(0.5, colorList[1]);
          grad.addColorStop(1, colorList[2]);
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(0, 0); //坐标定位至0,0处
        // 1.背景颜色
        ctx.fillStyle = "#040e31";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.setLineDash([1, 0]);
        // 2.底部透明圆环
        ctx.beginPath();
        ctx.lineWidth = arcWidth;
        ctx.strokeStyle = "#ccdffb55";
        ctx.arc(x0, y0, arcRadius, 0, 2 * Math.PI); //绘制一个完整的圆
        ctx.stroke();
        // 3.渐变圆弧
        ctx.beginPath();
        ctx.lineWidth = arcWidth;
        ctx.strokeStyle = grad;
        ctx.arc(x0, y0, arcRadius, start, end);
        ctx.stroke();
        // 4.灰色虚细线
        ctx.beginPath();
        ctx.lineWidth = "20";
        ctx.setLineDash([3, 8]);
        ctx.strokeStyle = grad;
        ctx.arc(x0, y0, lineRadius, start, end);
        ctx.stroke();
        // 5.渐变虚细线
        ctx.beginPath();
        ctx.lineWidth = "20";
        ctx.strokeStyle = "#ccdffb55";
        // 设置虚线排列
        ctx.arc(x0, y0, lineRadius, end, start); //绘制一个完整的圆
        ctx.stroke();
        // 6.画圆弧两端的图标
        ctx.setLineDash([1, 0]);
        // 开始节点
        ctx.beginPath();
        ctx.lineWidth = lrw + "";
        ctx.fillStyle = colorList[0];
        ctx.arc(startNodeX, startNodeY, lrw, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        // 结束节点
        ctx.beginPath();
        ctx.fillStyle = colorList[2];
        ctx.arc(endNodeX, endNodeY, lrw, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        if (startTrack) {
          ctx.setLineDash([3, 4]);
          // 开始节点
          ctx.beginPath();
          ctx.lineWidth = lrw - 8 + "";
          ctx.strokeStyle = "#ffffff";
          ctx.arc(startNodeX, startNodeY, lrw - 5, 0, 2 * Math.PI);
          ctx.stroke();
        }
        if (endTrack) {
          ctx.setLineDash([3, 4]);
          // 结束节点
          ctx.beginPath();
          ctx.lineWidth = lrw - 8 + "";
          ctx.strokeStyle = "#ffffff";
          ctx.arc(endNodeX, endNodeY, lrw - 5, 0, 2 * Math.PI);
          ctx.stroke();
        }
        // 7.计算占比
        // let percent = (((end - start) / (2 * Math.PI)) * 100).toFixed(2);
        // ctx.font = `normal normal normal 32pt 宋体`;
        // ctx.fillStyle = colorList[0];
        // ctx.textAlign = "center";
        // ctx.lineWidth = 1;
        // ctx.textBaseline = "middle";
        // ctx.fillText(percent + "%", x0, y0);
        // 8.加载图片
        // let img = new Image();
        // img.src = "./images/circle.png";
        // img.onload = function (e) {
        //   // ctx.clearRect(0, 0, canvas.width, canvas.height);
        //   ctx.drawImage(this, 100, 100, 600, 600);
        // };
      }
      // 两点之间的距离
      function distance(x1, y1, x2, y2) {
        let squareSum = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
        return Math.round(Math.sqrt(squareSum));
      }
      // 求以下两个向量之间的角度
      function vectorAngle(x, y) {
        let angle = Math.atan2(x[1] - y[1], x[0] - y[0]);
        return angle;
      }

      /** 获取鼠标在canvas上的坐标**/
      function windowToCanvas(canvas, x, y) {
        let rect = canvas.getBoundingClientRect();
        return {
          x: Math.round((x - rect.left * (canvas.width / rect.width)) * ratioW),
          y: Math.round(
            (y - rect.top * (canvas.height / rect.height)) * ratioH
          ),
        };
      }
    </script>
  </body>
</html>
云GG
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas上纯JS实现可滑动时间刻度轴
liangpx.blog
07-18 8574
canvas上纯JS实现可滑动时间刻度轴、刻度轴
仿ios全屏滑动解锁控件
07-06
这个项目的核心是通过自定义View来实现滑动效果，并结合触摸事件处理，来达到滑动解锁的目的。 首先，我们需要创建一个新的Java类，比如命名为`SlideUnlockView`，继承自`View`。在这个类中，我们将重写一些关键的...
微信小程序canvas实现椭圆（圆形）缩放
最新发布
01-09
微信小程序canvas实现椭圆（圆形）缩放，包含小程序项目所有文件，在小程序开发工具可直接打开，也可单独查看whml、wxss、js文件查看实现细节。
js Canvas实现圆形时钟教程
10-21
主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5 Canvas画布讲解
weixin_55639808的博客
12-15 716
HTML5 Canvas画布讲解
cavans之实现在圆上的动态效果
qq_43178432的博客
06-14 314
cavans实现圆的动态效果实例
基于canvas、JavaScript实现滑动图片拼图验证
灰色头像@的博客
08-10 961
程序最重要的是滑块5，其它元素都随5的移动而变化。
uni-app中自定义图表（canvas实现chart图表）开发篇（3）-带针表刻度的圆环进度条
觉醒法师的专栏
05-20 1655
还是在之前几篇基础上，讲下圆环衍生出一种新的圆环进度条，以针表的刻度来绘制出一个进度条。图形如下： 一、创建相应文件 1.1 charts.js文件创建 /** * 图表 - 带时刻的圆环进度条 */ export class CircleBox { //构造函数 constructor(_context){ } //绘制图表 drawCircle(){ } } 1.2 vue页面创建 <template> <view class
canvas之图片无缝滚动
小白小白从不日别的博客
07-17 1248
原理及分析： 这个案例的重点就在于如何弥补图片移动之后的空白部分，这里需要用到canvas之图片绘制的相关知识，主要需要用到：ctx.drawImage(img对象,裁切x，裁切y，裁切w，裁切h,绘制x，绘制y，绘制w，绘制h) 也就是你差多少，我就裁剪多少给你补上 要注意的是这个案例只涉及到了图片在x轴方向上的移动，跟y轴没有关系 canvas { border: 1px solid } <canvas width="288" hei
uni-app canvas实现环形刻度进度条
ym深的博客
01-02 6645
因为项目中需要使用到一个环形刻度进度条，所以就需要实现这个需求，在uni-app插件市场找了一圈，也没有找到这种插件，只找到了一个环形进度条，所以就在该插件上修改，实现了一个环形刻度进度条 参考 uni-app插件市场：弧形进度条 微信小程序canvas画原型带刻度进度条 效果图 代码 <template> <view class="progress_box"> <canvas class="progress_bg" canvas-id="cpbg"><.
canvas实现鼠标移动特效
12-07
用canvas与JavaScript实现了鼠标移动时的特效，特效由多个圆构成，鼠标移动的时候会不断生成圆，每个圆的颜色都是随机的。
Android自定义圆形SeekBar
07-24
4. **监听滑动事件**: 为了响应用户的滑动操作，我们需要实现OnSeekBarChangeListener接口。在这个接口的onProgressChanged()方法中，根据当前的进度值更新滑块的位置，并重新调用onDraw()方法进行重绘。 5. **处理...
圆形滚动刻度seekbar
09-18
这个自定义控件的设计思路是利用自定义View的原理，重写onDraw()方法，通过画布（Canvas）来绘制圆形的轨道和刻度，同时处理触摸事件，实现手指滑动时的进度更新。 在实现过程中，开发者需要考虑以下几个关键点： ...
自定义组件实现可滑动的ToggleButton的功能.
05-23
1. **绘制滑动轨道和滑块**：在`onDraw()`方法中，我们使用Canvas绘制滑动轨道和滑块的形状，可以是矩形、圆角矩形或者自定义图形。颜色和样式可以根据需要进行定制。 2. **处理触摸事件**：覆盖`onTouchEvent()`...
HTML5手机滑动密码解锁特效代码
03-20
在滑动密码解锁中，HTML5可能用到的是`<canvas>`元素，这是一个可以动态绘制图形的区域，非常适合创建自定义的交互界面。 接着，JavaScript扮演了关键的角色。在滑动密码解锁特效中，JavaScript负责处理用户与界面...
解决 canvas隐藏后出现滚动条的问题
hbqjzx的专栏
03-19 1209
现在的 canvas 不能像 h5的 canvas 一样把 画布大小 和 显示大小分别设置，且 canvas 不能 `display：none`。 分享下我的处理方法： 把 canvas 包裹在一个 view 中， 然后把这个 view 高度变成 0，`overflow: hidden` 掉， 也可以把它定位出去。总之就是利用类似的方法把 canvas 隐藏。然后在绘制 canvas 结束后把 canvas 导出到 tempfile，用 img src 去加载。这样可以设置一个较大的画布，但展示成想要的
canvas 适配浏览器可视窗口出现滚动条问题
纯爱枫若情的博客
09-17 4740
canvas 适配浏览器可视窗口出现滚动条问题 一般来说，对于前端数据可视化工程师来说，canvas 是个极好的工具。 既能用 canvas 2d 调用 CanvasRenderingContext2D 的 api 来绘制各种图表、图形，这个主要依赖 cpu 来计算。也能用 canvas 3d webgl 来绘制各种图形、图表，它主要依赖 gpu 来绘制各种图形。 最近突然遇到一个问题是，我有一个...
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
Honiler的博客
11-09 5300
如果你对于canvas接触的比较少，在需要处理canvas绘制图表或图片的拖动、缩放等问题时可作参考。支持手势或鼠标滚轮定点缩放，可从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变。
canvas实现圆形裁剪
07-28
要在canvas中实现圆形裁剪，可以使用以下步骤： 1. 创建一个canvas元素，并获取它的上下文。 ```javascript const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ``` 2. 设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值