canvas鼠标跟随动画

最新推荐文章于 2024-04-13 17:41:08 发布
最新推荐文章于 2024-04-13 17:41:08 发布
阅读量741 收藏
点赞数 1
分类专栏： canvas 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta charset="utf-8">
    <title>jq22-code7</title>
    <style>
        html,body{
            margin: 0;
            padding:0;
        }
    </style>
    <title>Title</title>
</head>
<body>


<div style="width: 100%; height:500px;background: #000d4d">
    <canvas id="canv" style="width:100%;height: 500px;"></canvas>
    <h1 style="position: absolute;top: 100px;left:50%;margin-left:-400px;color: #ffffff;font-size:100px;">欢迎来到未来世界</h1>
</div>


<script>
    var num = 200;
    var w = window.innerWidth;
    var h = window.innerHeight;
    var max = 100;
    var _x = 0;
    var _y = 0;
    var _z = 150;
    var dtr = function(d) {
        return d * Math.PI / 180;
    };

    var rnd = function() {
        return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
    };
    var dist = function(p1, p2, p3) {
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
    };

    var cam = {
        obj: {
            x: _x,
            y: _y,
            z: _z
        },
        dest: {
            x: 0,
            y: 0,
            z: 1
        },
        dist: {
            x: 0,
            y: 0,
            z: 200
        },
        ang: {
            cplane: 0,
            splane: 0,
            ctheta: 0,
            stheta: 0
        },
        zoom: 1,
        disp: {
            x: w / 2,
            y: h / 2,
            z: 0
        },
        upd: function() {
            cam.dist.x = cam.dest.x - cam.obj.x;
            cam.dist.y = cam.dest.y - cam.obj.y;
            cam.dist.z = cam.dest.z - cam.obj.z;
            cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
            cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
            cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
            cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
        }
    };

    var trans = {
        parts: {
            sz: function(p, sz) {
                return {
                    x: p.x * sz.x,
                    y: p.y * sz.y,
                    z: p.z * sz.z
                };
            },
            rot: {
                x: function(p, rot) {
                    return {
                        x: p.x,
                        y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                        z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
                    };
                },
                y: function(p, rot) {
                    return {
                        x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                        y: p.y,
                        z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
                    };
                },
                z: function(p, rot) {
                    return {
                        x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                        y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                        z: p.z
                    };
                }
            },
            pos: function(p, pos) {
                return {
                    x: p.x + pos.x,
                    y: p.y + pos.y,
                    z: p.z + pos.z
                };
            }
        },
        pov: {
            plane: function(p) {
                return {
                    x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
                    y: p.y,
                    z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
                };
            },
            theta: function(p) {
                return {
                    x: p.x,
                    y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
                    z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
                };
            },
            set: function(p) {
                return {
                    x: p.x - cam.obj.x,
                    y: p.y - cam.obj.y,
                    z: p.z - cam.obj.z
                };
            }
        },
        persp: function(p) {
            return {
                x: p.x * cam.dist.z / p.z * cam.zoom,
                y: p.y * cam.dist.z / p.z * cam.zoom,
                z: p.z * cam.zoom,
                p: cam.dist.z / p.z
            };
        },
        disp: function(p, disp) {
            return {
                x: p.x + disp.x,
                y: -p.y + disp.y,
                z: p.z + disp.z,
                p: p.p
            };
        },
        steps: function(_obj_, sz, rot, pos, disp) {
            var _args = trans.parts.sz(_obj_, sz);
            _args = trans.parts.rot.x(_args, rot);
            _args = trans.parts.rot.y(_args, rot);
            _args = trans.parts.rot.z(_args, rot);
            _args = trans.parts.pos(_args, pos);
            _args = trans.pov.plane(_args);
            _args = trans.pov.theta(_args);
            _args = trans.pov.set(_args);
            _args = trans.persp(_args);
            _args = trans.disp(_args, disp);
            return _args;
        }
    };

    (function() {
        "use strict";
        var threeD = function(param) {
            this.transIn = {};
            this.transOut = {};
            this.transIn.vtx = (param.vtx);
            this.transIn.sz = (param.sz);
            this.transIn.rot = (param.rot);
            this.transIn.pos = (param.pos);
        };

        threeD.prototype.vupd = function() {
            this.transOut = trans.steps(

                this.transIn.vtx,
                this.transIn.sz,
                this.transIn.rot,
                this.transIn.pos,
                cam.disp
            );
        };

        var Build = function() {
            this.vel = 0.04;
            this.lim = 360;
            this.diff = 200;
            this.initPos = 100;
            this.toX = _x;
            this.toY = _y;
            this.go();
        };

        Build.prototype.go = function() {
            this.canvas = document.getElementById("canv");
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
            this.$ = canv.getContext("2d");
            this.$.globalCompositeOperation = 'source-over';
            this.varr = [];
            this.dist = [];
            this.calc = [];

            for (var i = 0, len = num; i < len; i++) {
                this.add();
            }

            this.rotObj = {
                x: 0,
                y: 0,
                z: 0
            };
            this.objSz = {
                x: w / 5,
                y: h / 5,
                z: w / 5
            };
        };

        Build.prototype.add = function() {
            this.varr.push(new threeD({
                vtx: {
                    x: rnd(),
                    y: rnd(),
                    z: rnd()
                },
                sz: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                rot: {
                    x: 20,
                    y: -20,
                    z: 0
                },
                pos: {
                    x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                    y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                    z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
                }
            }));
            this.calc.push({
                x: 360 * Math.random(),
                y: 360 * Math.random(),
                z: 360 * Math.random()
            });
        };

        Build.prototype.upd = function() {
            cam.obj.x += (this.toX - cam.obj.x) * 0.05;
            cam.obj.y += (this.toY - cam.obj.y) * 0.05;
        };

        Build.prototype.draw = function() {
            this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
            cam.upd();
            this.rotObj.x += 0.1;
            this.rotObj.y += 0.1;
            this.rotObj.z += 0.1;

            for (var i = 0; i < this.varr.length; i++) {
                for (var val in this.calc[i]) {
                    if (this.calc[i].hasOwnProperty(val)) {
                        this.calc[i][val] += this.vel;
                        if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
                    }
                }

                this.varr[i].transIn.pos = {
                    x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
                    y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
                    z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
                };
                this.varr[i].transIn.rot = this.rotObj;
                this.varr[i].transIn.sz = this.objSz;
                this.varr[i].vupd();
                if (this.varr[i].transOut.p < 0) continue;
                var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
                this.$.globalCompositeOperation = 'lighter';
                g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
                g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
                g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
                this.$.fillStyle = g;
                this.$.beginPath();
                this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
                this.$.fill();
                this.$.closePath();
            }
        };
        Build.prototype.anim = function() {
            window.requestAnimationFrame = (function() {
                return window.requestAnimationFrame ||
                    function(callback, element) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();
            var anim = function() {
                this.upd();
                this.draw();
                window.requestAnimationFrame(anim);
            }.bind(this);
            window.requestAnimationFrame(anim);
        };

        Build.prototype.run = function() {
            this.anim();

            window.addEventListener('mousemove', function(e) {
                this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
                this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
            }.bind(this));
            window.addEventListener('touchmove', function(e) {
                e.preventDefault();
                this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
                this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
            }.bind(this));
            window.addEventListener('mousedown', function(e) {
                for (var i = 0; i < 100; i++) {
                    this.add();
                }
            }.bind(this));
            window.addEventListener('touchstart', function(e) {
                e.preventDefault();
                for (var i = 0; i < 100; i++) {
                    this.add();
                }
            }.bind(this));
        };
        var app = new Build();
        app.run();
    })();
    window.addEventListener('resize', function() {
        canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;
    }, false);
</script>

</body>
</html>

 

Byte_Dance
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
weixin_29243279的博客
06-07 533
关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！下面我会直击重点，用最短的时间，使用Canvas制作鼠标跟随动画如何制作动画常用的绘图动画的方式有以下几种：CSS3SVGCanvasWebGL让我们先分析分析...
用html制作粒子线条,html5 canvas跟随鼠标粒子线条动画特效
weixin_34640289的博客
06-03 908
特效描述：html5 canvas 跟随鼠标 粒子线条动画特效，html5 基于canvas制作鼠标移动粒子线条动画代码结构1. HTML代码// One of my first experiments, woop! :Dvar SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var RADIUS =...
Canvas 鼠标跟随动画 Demo
paopao_pop的博客
06-03 161
附上代码。
HTML自动跟随背景颜色,5分钟实现Canvas鼠标跟随动画背景
weixin_34587189的博客
05-31 443
关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！下面我会直击重点，用最短的时间，使用 Canvas 制作 鼠标跟随动画如何制作动画常用的绘图动画的方式有以下几种：CSS3SVGCanvasWebGL让我们先分...
canvas实现粒子跟随鼠标动画
qq_40710974的博客
06-26 1131
canvas是前端绘制图形的好帮手，不少大牛的博客也会精心的用canvas绘制炫酷的背景。图形与可视化界面就是前端最好的名片，泡妞之前尚且知道要梳个靓头精心打扮，而canvas就是你装点门面与大牛平齐，脱颖而出的绝佳神器。...
基于canvas的鼠标跟随粒子动画
weixin_64644452的博客
04-13 232
基于canvas实现的鼠标跟随特效
canvas炫动鼠标跟随效果
qq_41605893的博客
11-05 908
<!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>Doc
canvas跟随鼠标移动动画
weixin_72923430的博客
11-09 184
canvas动画就是一遍一遍的重绘 需要对每次重绘的下一个位置进行计算。
JS特效第2弹：Canvas跟随鼠标光标动画特效
weixin_38343072的博客
11-29 284
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
5分钟实现Canvas鼠标跟随动画背景
12-09
【Canvas鼠标跟随动画背景详解】 在前端开发中，创造引人入胜的视觉效果是提升用户体验的重要手段之一。本文将详细介绍如何使用HTML5的Canvas元素实现一个炫酷的鼠标跟随动画背景。这种动画效果通常应用于个人网站...
Canvas跟随鼠标光标动画特效特效代码
03-20
本知识点主要围绕如何利用Canvas创建各种鼠标跟随的动画特效进行深入探讨。 首先，Canvas的基本使用包括在HTML中声明一个Canvas元素，并通过JavaScript来获取Canvas的2D渲染上下文。例如： ```html <canvas id=...
Canvas跟随鼠标光标动画特效
06-24
现在，我们有了一个可以绘图的环境，接下来就可以实现鼠标跟随的动画特效了。这通常涉及到监听鼠标的`mousemove`事件，并根据鼠标的当前位置更新动画状态。以下是一个简单的例子： ```javascript canvas....
html5 canvas鼠标跟随线条动画特效
06-11
本案例中，“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的有趣应用，它能够实时追踪用户的鼠标移动，并在Canvas上绘制出变化色彩的线条轨迹。 首先，我们需要理解Canvas的基本结构。在HTML中，...
Canvas鼠标跟随光标花环特效
06-24
在“Canvas鼠标跟随光标花环特效”中，开发者首先会获取到Canvas元素的2D绘图上下文（`context`），然后监听`mousemove`事件来捕获鼠标的移动位置。每当鼠标移动时，事件处理器会被调用，获取到鼠标的坐标，并使用...
毕设系统—智慧工地监控管理系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕设系统—智慧工地监控管理系统-可执行内含文档代码-可执行内含文档代码.zip
一种基于关键能力的体系贡献率评估方法_李丹.caj
最新发布
07-28
一种基于关键能力的体系贡献率评估方法_李丹
化学/环境学-线性拟合/零级反应动力学拟合/一级反应动力学拟合/二级反应动力学拟合/三级反应动力学拟合软件
07-28
在进行实验的过程中，常常遇到做出一组数据却不知其效果的困扰，如做出标准曲线却不知其拟合优度。一般需用电脑的专业软件进行拟合，如Origin、MATLAB等，但存在操作步骤复杂，软件需付费等问题。基于上述情况，针对线性拟合（linear fitting）和零级反应动力学拟合（zero-order reaction kinetics fitting）、一级反应动力学拟合（first-order reaction kinetics fitting）、二级反应动力学拟合（second-order reaction kinetics fitting）、三级反应动力学拟合（third-order reaction kinetics fitting）等特殊拟合场景，开发了一个软件，其优势有： a.使用BSD许可证，即允许免费使用、修改和分发； b.支持手机（Android系统）和电脑（Windows系统）双平台使用，便于在实验现场检验实验效果； c.软件界面均采用中文。
731545397801645熊猫侠v1.1.50.apk
07-28
731545397801645熊猫侠v1.1.50.apk
用H5做的canvas的吊钩抓取的动画程序有没有
03-31
很多人都使用HTML5 Canvas来创建吊钩抓取的动画程序。这种程序通常使用JavaScript来控制画布上的对象，使用鼠标或触摸屏幕来控制吊钩的位置和角度，并在画布上显示抓取过程。以下是一个简单的示例程序： ``` <!DOCTYPE html> <html> <head> <title>Hook Catch Animation</title> <style> canvas { border: 1px solid black; } </style> </head> <body onload="start()"> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas, ctx, hookX, hookY, angle, speed, dt; function start() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); hookX = canvas.width/2; hookY = 50; angle = Math.PI/2; speed = 100; dt = 0.01; draw(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawHook(); drawBox(); moveHook(); requestAnimationFrame(draw); } function drawHook() { ctx.beginPath(); ctx.moveTo(hookX, hookY); ctx.lineTo(hookX + 20*Math.cos(angle), hookY + 20*Math.sin(angle)); ctx.stroke(); } function drawBox() { ctx.fillRect(canvas.width/2 - 25, canvas.height - 50, 50, 50); } function moveHook() { if (hookY < canvas.height - 50) { hookY += speed*dt; angle += 0.1*dt; } else { speed = 0; } } canvas.addEventListener("mousemove", function(event) { hookX = event.clientX - canvas.offsetLeft; hookY = event.clientY - canvas.offsetTop; angle = Math.atan2(hookY - 50, hookX - canvas.width/2); speed = 100; }); </script> </body> </html> ``` 这个程序使用Canvas绘制了一个吊钩和一个方块，当鼠标在画布上移动时，吊钩跟随鼠标位置移动，并在方块上抓取。程序还包括一些基本的物理模拟来模拟吊钩的动作。你可以根据自己的需要修改程序，添加更多的特性和效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值