JavaScript实现环绕鼠标旋转效果

2024-08-04 16:49:25

本文实例为大家分享了JavaScript实现环绕鼠标旋转效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Resize</title>
    <style type="text/css">
        /* 清除默认边距 */
        *{
            margin: 0;
            padding:0
        }
        html,body{
            /* 设置浏览器宽高为100% */
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <!-- canvas可以书写内容 但是只会在浏览器不显示canvas时才会显示书写的内容 -->
    <canvas></canvas>
    <script src="js/javascript.js"></script>
</body>
 
</html>

js：

//以前封装的函数 直接从工具库中复制过来的
/**
 * 获取随机数的函数 获取到的随机数取整
 */
 function getRandom(a, b){
    return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)
}
/**
 * 获取16进制的随机颜色值
 */
function getColor(){
    var color = '#'
    for(var i=0;i<3;i++){
        var hex = getRandom(0, 256).toString(16)
        color += hex.length === 1 ? '0' + hex : hex;
    }
    return color
}
//获取随机数 但是不取整
function randomDoubleFromRange(a,b) {
    return Math.random() * (Math.abs(a - b)) + Math.min(a, b);
}
 
//设置鼠标的位置 先设置为window的中心
var mouse = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
}
 
//创建鼠标移动的事件监听事件  监听鼠标所在window中的实时位置
window.addEventListener('mousemove', function (window) {
    //给数组中的x和y修改值
    mouse.x = window.clientX;
    mouse.y = window.clientY;
});
 
//当窗口大小发生改变时 重新获取画布宽高并且重置代码 resize事件在窗口大小变化时触发
window.addEventListener('resize', function () {
    //window的可用窗口大小 包含了滚动条的区域大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
});
 
//获取页面上的canvas
var canvas = document.querySelector('canvas');
 
//设置canvas的大小为window大小 如果不设置 就使用默认宽高300*150
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
//设置canvas绘画的环境 语法Canvas.getContext(contextID) 现在版本只能写参数2d 以后可能会支持3d
var ctx = canvas.getContext('2d');
 
//封装一个制造环绕鼠标的小球的函数 参数是小球圆心在x轴的位置 在y轴的位置 小球半径 小球填充颜色
function Particle(x, y, radius, color) {
    //小球中心点的x轴位置
    this.x = x;
    //小球中心点的y轴位置
    this.y = y;
    //小球半径
    this.radius = radius;
    //小球颜色
    this.color = color;
    //小球转动的弧度值 不取整 如果取整 就少了很多数字 很多小球都会重叠
    this.theta = randomDoubleFromRange(0, 2 * Math.PI);
    //小球绕中心点转动的速度
    this.speed = 0.05;
    //小球距离中心点的距离
    this.distance = getRandom(70, 90);
    //小球跟随鼠标移动的速度
    this.dragSpeed = 0.05;
    //记录鼠标移动前鼠标的位置
    this.lastMouse = {
        x: x,
        y: y
    };
    //绘制函数
    this.draw = function (lastPosition) {
        //重置当前路径 因为创建的每一个路径都会以上一个beginPath之后的所有路径作为基础绘制 会把之前所有线条的颜色全部绘制成和最后一个线条相同的一个颜色
        ctx.beginPath();
        //将小球颜色作为填充颜色
        ctx.strokeStyle = this.color;
        //将小球半径作为路径宽度
        ctx.lineWidth = this.radius;
        //路径起始位置
        ctx.moveTo(lastPosition.x, lastPosition.y);
        //路径结束位置
        ctx.lineTo(this.x, this.y);
        //绘制确切路径
        ctx.stroke();
        //关闭路径 不是结束路径 而是从结束点创建一条线连接到起始点 使路径闭合
        ctx.closePath();
    }
 
    //更新数据的函数
    this.update = function () {
        //创建lastPosition对象接收上一次鼠标的x和y的值
        var lastPosition = {
            x: this.x,
            y: this.y
        }
 
        //每次调用函数移动鼠标当前位置和上一次位置之间的dragSpeed = 0.05的距离 产生拖拽感觉
        this.lastMouse.x += (mouse.x - this.lastMouse.x) * this.dragSpeed;
        this.lastMouse.y += (mouse.y - this.lastMouse.y) * this.dragSpeed;
 
        //更新小球当前位置 因为每一次调用小球的旋转角度不同导致其位置不同
        this.x = this.lastMouse.x + Math.cos(this.theta) * this.distance;
        this.y = this.lastMouse.y + Math.sin(this.theta) * this.distance;
 
        //更新小球的角度值
        this.theta += this.speed;
        //将参数传递给绘制函数绘制路径
        this.draw(lastPosition);
    }
}
 
//定义particles变量
var particles;
 
//初始化函数
function init() {
    // 每次调用这个函数都要先把数组内容清空 因为使用这个函数除了打开网页后第一次代表调用之外 别的调用都表示窗口大小发生了改变 参数发生了变化 为了修改窗口大小之后又因为调用该函数导致小球重复创建 所以要调用后先清空再创建
    particles = [];
    // 绘制50个小球
    for (var i = 0; i < 50; i++) {
        //获取随机的颜色
        let color = getColor()
        //将构造函数创造的小球添加到数组中
        particles.push(new Particle(canvas.width / 2, canvas.height / 2, 3, color));
    }
}
 
function animate() {
    //定时的调用这个函数 类似于setInterval 但是setInterval时间间隔不是很准确 requestAnimationFrame固定为以每秒60次的频率调用一次括号内的函数
    requestAnimationFrame(animate);
 
    // 每一帧都给之前的帧蒙上一层白色透明的矩形 用以清除上一帧绘制的路径
    //填充矩形颜色 矩形背景颜色 透明度设置为0.1 可以使之前几帧的路径因为多次覆盖慢慢边淡 只是会在背景上留下很淡的痕迹 如果直接使用rgb白色覆盖 虽然没有痕迹残留 但是之前路径直接被白色覆盖 没有拖尾效果
    // ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    //绘制矩形 给window绘制一个等高等宽的矩形 以此制造一个渐变的效果
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    //对键名遍历数组 获取canvas.width / 2, canvas.height / 2, 3, color参数 每遍历一次就调用一次update函数 将获取到的参数作为实参传递给update函数
    for (var p of particles) {
        p.update();
    }
}
 
//初始化 创建小球
init();
//开始动画
animate();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js根据鼠标移动速度背景图片自动旋转的方法

本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
touch.js 拖动、缩放、旋转（鼠标手势）功能代码

可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback) { touch.on($targetObj, 'touchsta
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo
js实现图片旋转 js滚动鼠标中间对图片放大缩小

从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j
JavaScript实现环绕鼠标旋转效果

本文实例为大家分享了JavaScript实现环绕鼠标旋转效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
javascript DIV跟随鼠标移动

首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o
javascript实现判断鼠标的状态

javascript实现判断鼠标的状态 <script> function dclick() { form1.text.value = "您双击了页面!"; } function Click() { form1.text.value += "您单击了页面"; } function down() { form1.text.value = "您按下了鼠标"; } function up() { form1.text.value = &qu
JavaScript简单实现鼠标移动切换图片的方法

本文实例讲述了JavaScript简单实现鼠标移动切换图片的方法.分享给大家供大家参考,具体如下: <title>JavaScript切换图片</title> <script> function showDaTu(src){ document.getElementById("defaultImg").src=src; } </script> <img src="images/wall1.jpg" id="
javascript实时获取鼠标坐标值并显示的方法

本文实例讲述了javascript实时获取鼠标坐标值并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo
javascript获取当前鼠标坐标的方法

本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars
JavaScript实现的鼠标响应颜色渐变效果完整实例

本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
JavaScript实现的鼠标跟随特效示例【2则实例】

本文实例讲述了JavaScript实现的鼠标跟随特效.分享给大家供大家参考,具体如下: 鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小.根据书上的代码做了一些修改.比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显.截了三幅图,黑点近似代表鼠标的位置.效果图如下: 源代码: <html>
JavaScript实现捕获鼠标坐标

本文实例为大家分享了JavaScript实现捕获鼠标坐标的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象</title> <style> .box1{ width: 300px; height: 100px; border: 1px solid #
javascript全局自定义鼠标右键菜单

本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下前言 html全局自定义鼠标右键菜单一.效果展示二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #TextBox{ width: 2

JavaScript实现环绕鼠标旋转效果

相关推荐

随机推荐