基于canvas画布的星空效果
canvas是html5的新标签,其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性。这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项。
首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="canvas/cosmos_canvas.js" type="text/javascript" charset="utf-8"></script>
HTML,当然如果浏览器不支持canvas的话,运行程序没效果,并显示“该浏览器不支持canvas”
<canvas id="starts">该浏览器不支持canvas</canvas>
cosmos_canvas.js脚本
function canvas(id,starscolor,starsamount,starsradius,movrange,speed,trailing){//宇宙特效
"use strict";
var canvas = document.getElementById(id),ctx = canvas.getContext('2d'),w = canvas.width = window.innerWidth,h = canvas.height = window.innerHeight,hue = starscolor,//230stars = [],count = 0,maxStars = starsamount;//星星数量var canvas2 = document.createElement('canvas'),ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();// End cachefunction random(min, max) {if (arguments.length < 2) {max = min;min = 0;}if (min > max) {var hold = max;max = min;min = hold;}return Math.floor(Math.random() * (max - min + 1)) + min;
}function maxOrbit(x, y) {var max = Math.max(x, y),diameter = Math.round(Math.sqrt(max * max + max * max));return diameter / movrange;//星星移动范围,值越大范围越小,
}var Star = function() {this.orbitRadius = random(maxOrbit(w, h));this.radius = random(starsradius, this.orbitRadius) / 8; //星星半径大小this.orbitX = w / 2;this.orbitY = h / 2;this.timePassed = random(0, maxStars);this.speed = random(this.orbitRadius) / speed; //星星移动速度this.alpha = random(2, 10) / 10;count++;stars[count] = this;
}Star.prototype.draw = function() {var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,twinkle = random(10);if (twinkle === 1 && this.alpha > 0) {this.alpha -= 0.05;} else if (twinkle === 2 && this.alpha < 1) {this.alpha += 0.05;}ctx.globalAlpha = this.alpha;ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);this.timePassed += this.speed;
}for (var i = 0; i < maxStars; i++) {new Star();
}function animation() {ctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = trailing; //尾巴ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';ctx.fillRect(0, 0, w, h)ctx.globalCompositeOperation = 'lighter';for (var i = 1, l = stars.length; i < l; i++) {stars[i].draw();};window.requestAnimationFrame(animation);
}animation();
}
调用方法:这里没写任何样式所以默认情况下是全屏效果
$(function(){
//canvas的id名,星星颜色(hsla的hue色调),星星数量,星星半径比,星星移动范围(值越大范围越小),星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
});
效果:
然后我再加3个canvas,改些参数做效果对比吧
HTML
<canvas id="starts">该浏览器不支持canvas</canvas>
<canvas id="starts1">该浏览器不支持canvas</canvas>
<canvas id="starts2">该浏览器不支持canvas</canvas>
<canvas id="starts3">该浏览器不支持canvas</canvas>
javascript
$(function(){//canvas的id名,星星颜色(hsla的hue色调),星星数量,星星半径比,星星移动范围(值越大范围越小),星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
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);
$("canvas").width($(window).width()/2);
$("canvas").height($(window).height()/2);
$("canvas").css("float","left");
});
就这样,四个浩瀚的宇宙出来了
基于canvas画布的星空效果相关推荐
- html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
- s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
- 炫酷canvas网页背景动画效果
下载地址非常炫酷的网页背景旋转特效,基于canvas画布实现的网页背景动画效果 dd:
- 基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下 这是基础结构 没什么好说的 ?<!DOCTYPE html> <htm ...
- 基于canvas制作绚丽的倒计时效果
基于canvas制作绚丽的倒计时效果 一.先看下效果 项目设计: 数字渲染:数字是存储在一个三维数组里面,通过每次传入一个数字,来取出这个数字对应的点阵模型,这个模型是一个二维数组,有圆点的地方值为1 ...
- java做橡皮擦效果_基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下 这是基础结构 没什么好说的 ? Document *{padding: 0;margin ...
- html5 星空,用canvas实现简单的星空效果
用canvas实现简单的星空效果 因为日常被人说博客没文章所以就算只是写了个很简单的小星星也努力的把过程拼凑出来写个博客辣!(. Step.0 涉及到的所有的代码都放在了我的github上 首先看一下 ...
- Canvas星空效果(JS面向对象)
概述 更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 ...
- 前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
最新文章
- java由goto_在java中goto的目的
- 如何拆分PDF,PDF拆分页面的方法
- Eclipse中自定义注释
- 山西上党残疾男子“只”手脱贫 带领村民增收
- 推荐系统顶会RecSys’20亮点赏析
- 2017 3月15日 上午
- Python数据结构与算法(1.1)——数据结构与算法导论
- 超详细的linux部署redis实战记录
- 高薪设计师必修课 AE移动UI动效设计从入门到实战
- 服务器搭建织梦cms系统,零基础使用织梦cms搭建自己的网站「织梦建站」
- 美团店铺评价语言处理以及分类(tfidf,SVM,决策树,随机森林,Knn,ensemble)...
- c语言中字母大写转小写,C语言中字母大小写转换的简单操作
- 临沂办理高新技术企业需要什么文件及材料
- 雅思托福100G视频教程及资料
- 高通终端修改nv值后,不重启终端即生效
- LiFi比WiFi快100倍:它如何运作,实际应用靠谱吗
- RGB颜色表(按需求分类),例如:柔和的、明亮的、温和的
- 为学弟学妹熬夜的一份零基础 C++ 开发学习路线
- 微信定时消息之搞定女朋友
- 苹果内购退款需要注意的一些东西