<!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. 如何解决Firefox浏览器地址栏中文搜索速度很慢

    一.插件安装 之前使用Chrome浏览器,习惯在地址栏中直接进行中文搜索.转到Firefox之后,突然发现在地址栏进行中文搜索,访问速度会很慢. 可以使用插件解决这个问题:Omnibar 插件地址:h ...

  2. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  3. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

  4. VisualTreeHelper使用——使用BFS实现高效率的视觉对象搜索

    BFS,即广度优先搜索,是一种典型的图论算法.BFS算法与DFS(深度优先搜索)算法相对应,都是寻找图论中寻路的常用算法,两者的实现各有优点. 其中DFS算法常用递归实现,也就是常见的一条路找到黑再找 ...

  5. LintCode_69 二叉树前序遍历

    题目 给出一棵二叉树,返回其节点值的前序遍历. 和中序遍历基本相同 C++代码 vector<int> preorderTraversal(TreeNode *root) { // wri ...

  6. Directx11教程(43) 纹理映射(13)-动态纹理映射

    原文:Directx11教程(43) 纹理映射(13)-动态纹理映射      本篇教程中,我们将在前面基于光照的地形与水面程序里面加上纹理映射,而且我们会基于时间动态改变水面的纹理坐标,实现水面纹理 ...

  7. DCOJ5117 set

    题目描述 给定一个数集 A,要求构造一个数集 B,满足: • 对于 A 集合中任意的数 x,x 属于 B,即 A ⊆ B: • 对于 B 集合中任意的数 a, b,(a + b) mod p 属于 B ...

  8. Mysterious Antiques in Sackler Museum（判断长方形）

    题目链接 参考博客Ritchie丶的博客 - UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形) 题意:大概意思就是判断四个矩形能不能 ...

  9. Java练习 SDUT-2561_九九乘法表

    九九乘法表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 九九乘法表是数学学习的基础,今天我们就来看看乘法表的相关问题 ...

  10. H5页面IOS中键盘弹出导致点击错位的问题

    IOS在点击输入框弹出键盘  键盘回缩 后 定位没有相应改变  还有  textarea 也会弹出键盘 $("input").blur(function() { console.l ...