JS画布画布实现炫酷的旋转星空效果示例

本文实例讲述了射流研究…画布画布实现炫酷的旋转星空效果。分享给大家供大家参考，具体如下：

帆布是html5的新标签，其画布功能尤为强大。当然了帆布在IE10以下浏览器是不兼容的，所以呢为了特效肯定是牺牲一定的兼容性。这里呢，分享一个基于帆布开发的浩瀚星河插件，其实这个源代码是网上下载的，我把它整合了一下，重新封装一些参数提供更多的可改项。

首先引入两个爪哇岛描述语言脚本，一个是框架插件，另一个是封装好的cosmos_canvas.js

脚本src=' http : js/jquery-1。11 .0 .js ' type=' text/JavaScript ' charset=' utf-8 '/script script src=' http : canvas/cosmos _ canvas。js ' type=' text/JavaScript ' charset=' utf-8 '/脚本html，当然如果浏览器不支持帆布的话，运行程序没效果，并显示"该浏览器不支持画布"

画布id='starts '该浏览器不支持canvascosmos_canvas.js脚本

函数画布(id、starscolor、starsamount、starsradius、movrange、speed、training){//宇宙特效使用"严格";var canvas=文档。getelementbyid(id)，ctx=canvas.getContext('2d ')，w=canvas。宽度=窗口。内部宽度，h=画布。高度=窗户。内部高度，色相=starscolor，//230 star=[]，计数=0，maxStars=starsamount//星星数量var画布2=文档。创建元素(“画布”)，CTX 2=画布2。get context(' 2d ')；can vas 2。宽度=100；can vas 2。高度=100；var half=canvas2.width/2，gradient 2=CTX 2。createradialgradient(半，半，0,半，半，半);gradient2.addColorStop(0.025，' # CCC ')；gradient2.addColorStop(0.1，' HSL('色相',61%,33%)');gradient2.addColorStop(0.25，' HSL('色相',64%,6%)');gradient2.addColorStop(1，)透明');CTX 2。FillStyle=渐变2；CTX 2。begin path()；ctx2.arc(一半，一半，一半，0,数学* 2)；CTX 2。fill()；//End cachefunction random(最小值，最大值){ if(参数。长度2){最大值=最小值；最小值=0;} if(min max){ var hold=max；最大值=最小值；最小值=保持；}返回数学。地板(数学。random()*(max-min-1))min；}函数maxOrbit，y) { var max=Math.max(x，y)，diameter=Math。圆(数学。sqrt(max * max * max))；返回直径/移动范围；//星星移动范围，值越大范围越小，} var Star=function(){ this。轨道半径=随机(最大轨道(w，h))；这个。半径=随机(星形半径，这个。轨道半径)/8；//星星半径大小这个。orbitx=w/2；这个。orbity=h/2；this.timePassed=random(0，maxStars)；这个.速度=随机(this.orbitRadius) /速度；//星星移动速度这个=随机(2,10)/10;计数；星星[计数]=这个；}明星。原型。draw=function(){ var x=math。罪恶(这。时间过去了)*这。轨道半径这个。orbitx，y=数学。因为这个。时间过去了)*这。轨道半径这个。轨道上，闪烁=random(10)；如果(闪烁===1 this0){ this-=0.05；} else if(闪烁==2 this1){ this=0.05；} CTX。全局阿尔法=这个。阿尔法；ctx.drawImage(canvas2，x - this.radius/2，y - this.radius/2，this.radius，this。半径)；这个。时间流逝=这。速度；} for(var I=0；I maxStarsi){ 0新星();}函数动画(){ CTX。global composite operation=' source-over '；ctx.globalAlpha=尾随；//尾巴ctx.fillStyle='hsla('色相',64%,6%,2 ');ctx。global composite operation=' light '；for (var i=1，l=stars.lengthI l星星draw()；};window.requestAnimationFrame(动画);}动画();}调用方法：这里没写任何样式所以默认情况下是全屏效果

$(函数(){//画布的编号名，星星颜色(hsla的色彩色调),星星数量，星星半径比，星星移动范围（值越大范围越小),星星移动速度（值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)canvas('starts '，230，1000，60，2，50000，0.5)；});效果：

然后我再加3个帆布，改些参数做效果对比吧

超文本标记语言

canvascanvas id='starts '此浏览器不支持canvascanvascanvas id=' starts 1 '。此浏览器不支持canvascanvascanvas id=' starts 2 '。此浏览器不支持canvasjavascript

$(function(){ //canvas id name，star color(HSLA的色相色相色相)，star number，star radius ratio，star移动范围(值越大，范围越小)，star移动速度(值越大，速度越慢)，star拖尾效果(值从0到1越小，拖尾越明显)Canvas ('Starts '，230，110) canvas('starts1 '，160，800，70，2.5，55000，0.4)；canvas('starts2 '，80，600，80，3，60000，0.3)；canvas('starts3 '，0，400，90，3.5，65000，0.2)；$(“画布”)。宽度($(窗口)。width()/2)；$(“画布”)。高度($(窗口)。高度()/2)；$(“画布”)。css('float '，' left ')；});就这样，四个巨大的宇宙出现了

关于JavaScript的更多信息，请查看本网站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。