HTML canvas 制作星星背景加流星特效

来源：互联网发布：二维动漫制作软件编辑：程序博客网时间：2024/05/17 02:36
突然想做一个流星动画效果结果做完好jb丑啊感觉缺了什么算了反正我也想不起来页面是用的CANVAS纯JavaScript做的
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        html,        body {            height: 100%;            width: 100%;            margin: 0px;            padding: 0px;        }    </style></head><body>    <canvas id="画板id"></canvas>    <script>        var 参数 = {            画板载入: function (can) {                    var canvas = document.getElementById(can);                    canvas.width = document.body.offsetWidth;                    canvas.height = document.body.offsetHeight;                    canvas.style.backgroundColor = "rgb(255, 255, 255)";                    return canvas;                },                二D配置: function (canvas) {                    var cvs = canvas.getContext('2d');                    return cvs;                },                星星配置: function () {                    var 星图 = 绘图.星星("","","");                    var image = new Image();                    image.src = 星图;                    return image;                },                背景星图: function (画板返回, 星星, size) {                    var x = 画板返回.width,                        y = 画板返回.height,                        rgba;                    var eko = 备用画板(x, y);                    var context = eko[1],                        canvas = eko[0];                    context.clearRect(0, 0, canvas.width, canvas.height);                    for (var i = 0; i < size; i++) {                        var moadl = Math.random() * 9;                        context.drawImage(星星, Math.random() * x, Math.random() * y, moadl, moadl);                    }                    canvas.parentNode.removeChild(canvas);                    var image = new Image();                    image.src = canvas.toDataURL("image/png");                    return image;                },文字:function(){var eko = 备用画板(500, 500);}        }        var 绘图 = {            星星: function (x, y, rgba) {                var eko = 备用画板(x, y);                var context = eko[1],                    civ = eko[0];                context.clearRect(0, 0, civ.width, civ.height);                var grd = context.createRadialGradient(civ.width / 2, civ.height / 2, 1, civ.width / 2, civ.height / 2, civ.width / 2);                grd.addColorStop(0, 'rgba(231,223,174,0.5)');                grd.addColorStop(1, 'rgba(231,223,174,0)');                context.fillStyle = grd;                context.fillRect(0, 0, civ.width, civ.height);                context.moveTo(cos(0)[0], cos(0)[1]);                context.lineTo(sin(0.78539815)[0], sin(0.78539815)[1]);                context.lineTo(cos(1.5707963)[0], cos(1.5707963)[1]);                context.lineTo(sin(2.35619445)[0], sin(2.35619445)[1]);                context.lineTo(cos(3.1415926)[0], cos(3.1415926)[1]);                context.lineTo(sin(0.78539815 + Math.PI)[0], sin(0.78539815 + Math.PI)[1]);                context.lineTo(cos(1.5707963 + Math.PI)[0], cos(1.5707963 + Math.PI)[1]);                context.lineTo(sin(2.35619445 + Math.PI)[0], sin(2.35619445 + Math.PI)[1]);                context.lineTo(cos(3.1415926 + Math.PI)[0], cos(3.1415926 + Math.PI)[1]);                context.fillStyle = rgba || "rgb(255, 249, 100)";                context.fill();                context.beginPath();                civ.parentNode.removeChild(civ);                return civ.toDataURL("image/png");                function cos(cos) {                    return [Math.cos(cos) * (civ.width / 2) + civ.width / 2, Math.sin(cos) * (civ.height / 2) + civ.height / 2]                }                function sin(sin) {                    return [Math.cos(sin) * (civ.width / 2 / 3) + civ.width / 2, Math.sin(sin) * (civ.height / 2 / 3) + civ.height / 2]                }            }        }        var 备用画板 = function (x, y, rgba) {            var civ = document.createElement("canvas");            civ.width = x || document.body.offsetWidth / 100;            civ.height = y || document.body.offsetWidth / 100;            civ.id = "stpc";            civ.style = "display:none; z-index:-9999";            document.body.appendChild(civ);            var canvas = document.getElementById("stpc");            var context = canvas.getContext("2d");            return [canvas, context];        }        var 修改 = {            修改背景: function (canvas, color) {                canvas.style.backgroundColor = color;                return true;            }        }        var 载入 = function (载入) {            return new 载入();        }        载入(function () {            var 画板返回 = 参数.画板载入("画板id");            修改.修改背景(画板返回, "rgb(9, 11, 31)");            var cvs = 参数.二D配置(画板返回);            var 星星 = 参数.星星配置();            var 星图 = 参数.背景星图(画板返回, 星星, 500);            var cexiao = 画板返回.width;            var cexiaox = 0;            var nico = [];            var maki = "";            (function donghua() {                cvs.clearRect(0, 0, 画板返回.width, 画板返回.height);                cvs.drawImage(星图, 0, 0);                var mrs = Math.random()*10+5;                if (nico.length < 10) {                    var naive = new Naive(Math.random() * 画板返回.width * 2, -Math.random()*画板返回.height, mrs, mrs, Math.random() * 2 + 10,2.8,0,0);                    nico.push(naive);                }                for (i = 0; i < nico.length; i++) {                    maki = nico[i];                    var tty = maki.shan();                    if (tty[0]<-画板返回.width&&tty[1]>画板返回.height*2) {                        nico.splice(i,1);                    }                }                requestAnimationFrame(donghua);            })();            function Naive(x, y, w, h, s,d,pi,hw,z) {                this.x = x;                this.y = y;                this.w = w;                this.h = h;                this.s = s;this.pi = pi;this.d = d;this.z = z;                this.shan = function () {this.dx = this.pi*Math.cos(this.d)+this.x;this.dy = this.pi*Math.sin(this.d)+this.y;cvs.beginPath();cvs.moveTo(this.dx,this.dy);cvs.lineTo(this.x,this.y);cvs.lineWidth = 1;this.lGrd = cvs.createLinearGradient(this.dx,this.dy,this.x,this.y);  this.lGrd.addColorStop(0, '#4CAF50');  this.lGrd.addColorStop(1, 'rgba(0,0,0,0)');  cvs.strokeStyle = this.lGrd;  cvs.stroke();cvs.beginPath();                    cvs.drawImage(星星, this.dx-this.w/2, this.dy-this.h/2, this.w, this.h);                    this.pi +=50;this.z += 0.1;                    return [this.dx,this.dy];                }            }            window.onresize = function () {                画板返回.width = window.innerWidth;                画板返回.height = window.innerHeight;星图 = 参数.背景星图(画板返回, 星星, 500);            }        });    </script></body></html>
直接放下代码吧
https://pan.baidu.com/s/1bp4KevX
业余做的因为懒所以就不做成插件了
阅读全文
0 0