(function(a){
a.fn.starBg=function(p){
var p=p||{}; var w_w=p&&p.window_width?p.window_width:"500";
var w_h=p&&p.window_height?p.window_height:"400";
var w_b=p&&p.window_background?p.window_background:"#000";
var s_c=p&&p.star_count?p.star_count:"600";
var s_color=p&&p.star_color?p.star_color:"#FFF";
var s_d=p&&p.star_depth?p.star_depth:"250";
var dom=a(this);
var fov = parseInt(s_d);
var SCREEN_WIDTH = parseInt(w_w);
var SCREEN_HEIGHT = parseInt(w_h);
var HALF_WIDTH = SCREEN_WIDTH/2;
var HALF_HEIGHT = SCREEN_HEIGHT/2;
var c_id = dom.attr("id");
var numPoints = s_c;
dom.attr({ width: w_w, height: w_h});
setup(); function setup()
{
function draw3Din2D(point3d)
{
x3d = point3d[0];
y3d = point3d[1];
z3d = point3d[2];
var scale = fov/(fov+z3d); // if(scale > 3){
// scale = (scale-3)*0.3>3?(scale-3)*0.3*0.3:(scale-3)*0.3;
//
// }
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_HEIGHT; c.lineWidth= scale;
c.strokeStyle = s_color;
c.beginPath();
c.moveTo(x2d,y2d);
c.lineTo(x2d+scale*0.5,y2d);
c.closePath();
c.stroke(); } var canvas = document.getElementById(c_id);
var c = canvas.getContext('2d'); var points = []; function initPoints()
{
for (i=0; i<numPoints; i++)
{
point = [(Math.random()*400)-200, (Math.random()*400)-200, (Math.random()*400)-200 ];
points.push(point); } } function render()
{ c.fillStyle=w_b;
c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT); for (i=0; i<numPoints; i++)
{
point3d = points[i]; z3d = point3d[2];
z3d-=1;
if(z3d<-fov){
z3d +=400; }
point3d[2] = z3d; draw3Din2D(point3d); } } initPoints(); var loop = setInterval(function(){
render();
}, 30); } }
})(jQuery);
    $("#stars").starBg({
window_width: $(document).width(),
window_height: $(document).height(),
window_background: '#000000',
star_count: '500',
star_color: '#fff',
star_depth: '100'
});

依赖Jquery

canvas 星空插件的更多相关文章

  1. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  2. js封装成插件-------Canvas统计图插件编写

    之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3 ...

  3. canvas星空和图形变换

    图形变换. 一.画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星. window.onload=function ...

  4. HTML5 CANVAS 弹幕插件

    概述 修改了普通弹幕运动的算法,新增了部分功能 详细 代码下载:http://www.demodashi.com/demo/10595.html 修改了普通弹幕运动的算法,新增了部分功能,具体请参看附 ...

  5. 开源造轮子:一个简洁,高效,轻量级,酷炫的不要不要的canvas粒子运动插件库

    一:开篇 哈哈哈,感谢标题党的莅临~ 虽然标题有点夸张的感觉,但实际上,插件库确实是简洁,高效,轻量级,酷炫酷炫的咯.废话不多说,先来看个标配例子吧: (codepen在线演示编辑:http://co ...

  6. konva canvas插件写雷达图示例

    最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中:Konva canva ...

  7. 13个JavaScript图表(JS图表)图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  8. canvas剪裁图片并上传,前端一步到位,无需用到后端

    背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...

  9. 关于canvas中的jquery

    关于h5,相比前端的同事们都很了解了吧!h5里面有个canvas,现在用的蛮火.但是canvas里面的代码确实是有点繁多,特别是要对于图形做什么操作的时候...我昨天无意间发现了一个canvas的插件 ...

随机推荐

  1. 【Luogu】P2766最长不下降子序列问题(暴力网络流)

    题目链接 水题qwq,数据都那么水. 我要是出数据的人我就卡$n^3$建图. qwq. 然而这么水的题我!居!然!没!有!1!A!!还!提!交!了!五!遍!!! md从现在开始要锻炼1A率了 看我从今 ...

  2. Luogu【P1725】琪露诺(单调队列,DP)

    本文是笔者第二篇解题报告.从现在开始,会将练的一些题发到博客上并归类到"解题报告"标签中. 琪露诺是这样一道题 这道题可以用纯DP做,但是据说会超时.(为什么?看起来过河这题比它数 ...

  3. UVa——540Team Queue(STL练习map、queue数组的综合使用)

    Team Queue Time Limit:                                                        3000MS                 ...

  4. HDU——2056Rectangles(几何计算)

    Rectangles Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. [SDOI2010] 地精部落 (组合数学,动态规划)

    题目链接 Solution 很巧妙的 DP. 可以看这里的题解. 比我自己讲要好的多. Code #include <bits/stdc++.h> using namespace std; ...

  6. sublime flatLand 主题

    今天试了下感觉主题不错 记下来备忘. 1.sublime3 package control install  搜索 flatLand 2 安装完成后. 修改 Preferences 文件,通过 Sub ...

  7. vue.js源码学习分享(七)

    var _Set; /* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) { // use ...

  8. 转 markdown编写规则、语法

    http://www.jianshu.com/p/1e402922ee32/ Markdown——入门指南 字数2231 阅读307754 评论115 喜欢1350 转载请注明原作者,如果你觉得这篇文 ...

  9. 慕课 python 操作数据库

    test_connection import MySQLdb conn = MySQLdb.Connect( host = '127.0.0.1', port = 3306, user = '**** ...

  10. iOS键盘中英文切换键盘高度获取通知方法

    iOS键盘中英文切换键盘高度获取通知方法, 有需要的朋友可以参考下. 注册通知 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppea ...