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

突然想做一个流星动画效果结果做完好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

业余做的因为懒所以就不做成插件了

HTML canvas 制作星星背景加流星特效相关推荐

三个canvas炫酷背景动画js特效
下载地址使用三个canvas实现的炫酷网页背景,很酷的网页动画特效. dd:
Canvas制作动态进度加载水球
前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 样式预览 height="342" width="1 ...
android 动态水球,Canvas 制作动态进度加载水球详解及实例代码
Canvas 动态进度加载水球前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路关于水波的实现,使用了sin()函数,通 ...
使用canvas制作背景水印
记录使用canvas 制作文字背景水印 // 首先创建canvas标签并设置画布大小var watchCanvas = document.createElement('canvas'); // 创建 ...
html5星星效果图,H5 canvas流星雨星星特效
/p> 一起来看流星雨 var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var ...
用离屏canvas制作仿Prezi页面转场动画特效
用离屏canvas制作网站页面特效.仿Prezi转场特效首屏效果页面切换转场效果 · 首屏圆形循环扩散效果首屏效果的难点在于圆形循环扩散动画和贝塞尔曲线的绘制.圆形逐渐扩大的动画并不难,关键在于 ...
如何用html制作一个动态烟花,视频加烟花特效视频如何制作烟花效果|视频上添加动态的焰火效果...
有句mmp不知当讲不当讲,今天竟然是孔子的诞辰,这样一算孔子很有可能是处女座呢!!当看到这条消息时我的内心是拒绝的,在我看来孔子的中庸思想表示的"平庸.折中.调和"明明是我们天秤座 ...
使用html5制作烟花的视频,视频加烟花特效视频如何制作烟花效果|视频上添加动态的焰火效果...
有句mmp不知当讲不当讲,今天竟然是孔子的诞辰,这样一算孔子很有可能是处女座呢!!当看到这条消息时我的内心是拒绝的,在我看来孔子的中庸思想表示的"平庸.折中.调和"明明是我们天秤座 ...
通过Canvas画布制作黑客帝国背景
通过Canvas画布制作黑客帝国背景电影介绍先推荐一下这部电影 <黑客帝国>是由华纳兄弟公司发行的系列动作片,该片由沃卓斯基兄弟执导,基努·里维斯.凯莉·安妮·莫斯.劳伦斯·菲什伯恩等 ...

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

HTML canvas 制作星星背景加流星特效相关推荐

最新文章

热门文章