<!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. 传统保险企业基于 Dubbo 的微服务实践

    本文整理自中国人寿保险(海外)股份有限公司深圳中心技术总监家黄晓彬在 Dubbo 社区开发者日深圳站的现场分享. 中国人寿保险(海外)股份有限公司负责香港.澳门.新加坡和印尼的业务开发,和国内业务不同 ...

  2. 通过sql 向数据库插入多行语句

    我们知道通过insert into 表名(列名) values(值)是向表中插入一条语句,可是当我们需要向数据库插入多条语句时,应该怎么做呢? 可以通过如下格式的sql 语句来实现一次向数据库插入多行 ...

  3. Linux iptables开放特定端口

    如果系统已安装则调过安装步骤 查找安装包 yum list | grep iptables 安装iptables yum install iptables-services 重启防火墙使配置文件生效 ...

  4. 从0开始学习 GitHub 系列之「01.初识 GitHub

    转载:http://blog.csdn.net/googdev/article/details/52787516 1. 写在前面 我一直认为 GitHub 是程序员必备技能,程序员应该没有不知道 Gi ...

  5. Android原生调用mui里面的js如何实现

    遍历所有运行中的webview页面,采用自带的SDK方法进行获取所有的IWebview.MUI中自带的webview是一个IWebviewArrayList<IWebview> webli ...

  6. 2018-9-30-C#-winforms-输入颜色转换颜色名

    title author date CreateTime categories C# winforms 输入颜色转换颜色名 lindexi 2018-09-30 18:27:49 +0800 2018 ...

  7. python Match函数

  8. pytest fixture 利用 params参数实现用例集合

    @pytest.fixture有一个params参数,接受一个列表,列表中每个数据都可以作为用例的输入.也就说有多少数据,就会形成多少用例.如下面例子,就形成3条用例 test_parametrizi ...

  9. 大数据技术之Flume

    第1章 概述 1.1 Flume定义 Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统.Flume基于流式架构,灵活简单. 1.2 Flume组成架构 ...

  10. python 代码中的类和对象