<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
background: black;
overflow:hidden;
}
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="C1"></canvas>
<script>
var loop ;

function canvas3d() {
var SCREEN_WIDTH = document.width;
var SCREEN_HEIGHT = document.height;
var fov = 250;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;
var numPoints = 10000;

var canvas = document.getElementById('C1');
var c = canvas.getContext("2d");
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var points = [];

function initPoints() {
for (var i = 0; i < numPoints; i++) {
points.push([
Math.random() * SCREEN_WIDTH - HALF_WIDTH,
Math.random() * SCREEN_HEIGHT - HALF_HEIGHT,
Math.random() * HALF_HEIGHT - HALF_HEIGHT
]);
}
}
function render() {
c.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (var i in points) {
var z3d = points[i][2];
z3d -= 4;
if (z3d < -fov) { z3d += HALF_HEIGHT }
points[i][2] = z3d;
draw3Din2D(points[i]);
}
}

function draw3Din2D(point3D) {
var x3d = point3D[0];
var y3d = point3D[1];
var z3d = point3D[2];

var scale = fov / (fov + z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_WIDTH;

c.lineWidth = scale;;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d, y2d);

c.lineTo(x2d + 1, y2d);
c.lineTo(x2d + scale, y2d);
c.stroke();
}
initPoints();
window.clearInterval(loop);
loop = setInterval(function () { render(); }, 50);
}

canvas3d();

window.onresize=function () {
canvas3d();
};
</script>
</body>
</html>

html5 canvas 3d屏保 源码的更多相关文章

  1. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  2. 基于html5制作3D拳击游戏源码下载

    今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...

  3. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  4. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  5. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  6. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  7. 3D屏保: 线圈

    LineFlower3DSP 一个3D屏保程序,算法的原理类似于圆内轮旋线的生成. 下载地址: http://files.cnblogs.com/WhyEngine/LineFlower3D_sp.z ...

  8. 3D屏保:排色榜

    3D屏保:排色榜 排色榜,是一个针对图形学中的色彩进行排序的DEMO,这里的色是色彩的意思,看成别的点进来的同学请自觉面壁.该DEMO可以按RGB,GBR,BRG,灰度值四种方式进行排序.排序算法为冒 ...

  9. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 解决git push、pull时总是需要你输入用户名和密码

    git config --global credential.helper store之后再次执行git push 或者git pull这时候还需要输入用户名和密码 下次就不需要了

  2. 笔试面试记录-字符串转换成整型数等（aatoi,itoa）

    C语言中经常用到字符串与数字之间的相互转换,常见的此类库函数有atof(字符串转换成浮点数).atoi(字符串转换成整型数).atol(字符串转换成长整形).itoa(整型数转换成字符串).ltoa( ...

  3. Linux操作系统各版本ISO镜像下载（包括oracle linux\redhat\centos\u

    Linux操作系统各版本ISO镜像下载(包括oracle linux\redhat\centos\ubuntu\debian等) 1.Oracle Linux(下载地址) (1)OracleLinux ...

  4. docker.[7] 数据卷容器

    docker.[7] 数据卷容器 挂在数据卷容器的方法: # docker run --volumes-from [Container Name]

  5. Docker.[1].环境准备.

    Docker.[1].环境准备. 环境描述: 在笔记本中安装了虚拟机,虚拟机中又安装了RedHat 7.x操作系统,然后在这个RedHat7.x的操作系统上,进行安装Docker. 虚拟机中的操作系统 ...

  6. MySQL.之 一行内容转换多行

    MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...

  7. 总体<导学>

    有一些奇奇怪怪的数据集 波士顿房价数据集 使用sklearn.datasers.load_boston 加载相关的数据集 重要参数 return_X_y 表示是否返回target (价格) 默认为Fa ...

  8. 外贸电子商务网站之Prestashop修改顶部导航

    如修改以上所示顶部导航. 如何在prestashop顶部导航栏添加链接,Module>Top horizontal menu点击进入Configure页面 1,在Settings 中看到 链接 ...

  9. 数据库lib7第2, 3题（创建索引和触发器)

    2. 分别为上述建立的表格建立适当的索引,请描述建立索引的过程(可以截图或者写SQL).其中,要求对SPJ标中的SNo, PNo字段各建立一个索引,为(PNo, JNo)的组合建立一个索引.请问,SN ...

  10. gitlab 添加本地项目

    1.安装git    https://git-scm.com/downloads 2.新建工程 3.创建密钥 a.桌面右键 b.cd ~/.ssh/ 如果提示 “ No such file or di ...