凌晨在谷奥看到消息：帅哥Dean Lee提取出了Chromium OS里的屏保和登录界面，屏保（horizontal_sparkle目录）（如上图），而登录界面（fade_in_out目录）则是一个可在随机位置显示Chromium OS的黑色画面。效果还是很炫的哦。期待Google放出精美的界面供选择。阅微博客也第一时间下载体验了。并且不敢独自欣赏，上传制作了两个demo：
屏保（horizontal_sparkle目录）【Demo1】
登录界面（fade_in_out目录） 【Demo2】
另外Dean Lee童鞋博客还提供了一份很给力的Chromium OS 开发指南（含编译指南）。稀饭的童鞋赶紧火速围观哦~~~
要下载源文件点击这里，把屏保的源码分享如下：
<html>
<head>
<script type=”text/javascript”>
var canvas;
var g;
var rate = 5;
var mouseX = 0;
var mouseY = 0;
var pmouseX = 0;
var pmouseY = 0;
var width, height;
var mousePressed = false;
var hexes = [];
function setup() {
canvas = document.createElement(“canvas”);
document.body.appendChild(canvas);
g = canvas.getContext(“2d”);
setInterval(draw, rate);
document.addEventListener(‘mousemove’, onDocumentMouseMove, false);
document.addEventListener(‘mousedown’, onDocumentMouseDown, false);
document.addEventListener(‘mouseup’, onDocumentMouseUp, false);
window.addEventListener(‘resize’, onWindowResize, false);
onWindowResize();
//////////////////////////////////////////
while (hexes.length < 200) {
hexes.push(new Hex());
}
}
function onWindowResize(e) {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
function onDocumentMouseMove(e) {
pmouseX = mouseX;
pmouseY = mouseY;
mouseX = e.pageX;
mouseY = e.pageY;
}
function onDocumentMouseDown(e) {
mousePressed = true;
}
function onDocumentMouseUp(e) {
mousePressed = false;
}
function dist(x, y, xx, yy) {
return Math.sqrt((xx-x)*(xx-x)+(yy-y)*(yy-y));
}
function constrain(v, min, max){
if(v<min) v = min;
if(v>max) v = max;
return v;
}
function map(v, i1, i2, o1, o2) {
return o1 + (o2 – o1) * ((v – i1) / (i2 – i1));
}
function random(a, b) {
var r = Math.random();
if (a instanceof Array) {
var i = Math.floor(r*a.length);
return a[i];
} else if (b == undefined) {
return r*a;
} else {
return r*(a+b)-a;
}
}
var cx = -200;
function draw() {
g.globalCompositeOperation = “source-over”;
g.fillStyle= “#000”;
g.fillRect(0, 0, width, height);
g.globalCompositeOperation = “lighter”;
for (var h in hexes) {
hexes[h].update();
hexes[h].draw();
}
cx += 8;
if (cx > width+200) {
cx = -200;
}
}
function roundedHex(x,y, d) {
var sides = 6;
var a = Math.PI*2/sides;
var aa = a;
var r = 10;
g.beginPath();
g.save();
g.translate(x, y);
g.moveTo(Math.cos(aa)*d, Math.sin(aa)*d);
for (var i = 0; i < sides; i++) {
aa += a;
g.lineTo(Math.cos(aa)*d, Math.sin(aa)*d);
}
g.fill();
g.restore();
g.closePath();
}
var colors = [“#e4463b”, “#fffc23”, “#5ad81c”, “#1c8bd8”];
var s = 80;
var rows = 20;
var cols = 10;
function Hex() {
this.x = (hexes.length%rows)*s;
this.y = Math.floor(hexes.length/rows)*s*0.865;
this.color = random(colors);
this.ss = 0;
this.draw = function() {
var radgrad2 = g.createRadialGradient(0,0,0,0,0,this.ss*1.5);//g.createRadialGradient(this.x,this.y,0,this.x,this.y,this.s);
radgrad2.addColorStop(0, this.color);
radgrad2.addColorStop(1, “#000”);
g.fillStyle = radgrad2;
if (this.ss > 0) {
roundedHex(this.x, this.y, this.ss);
}
}
this.update = function() {
var d = dist(cx, height/2.3, this.x, this.y);
d = constrain(d, 0, 200);
var x = map(d, 200, 0, 0, s*2);
this.ss += (x-this.ss)*0.5;
}
}
</script>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
background-color: #000;
height: 100%;
}
img {
position: absolute;
left: 50%;
margin-left: -90px;
padding-top: 470px;
}
</style>
</head>
<body onload=”setup()”>
<img src=”title.png” alt=”” width=”180″/>
</body>
</html>
抢到沙发了。。。
@韩国 哈哈。被你抢到了。
HTML5真牛啊，服了，彻底服了
@万戈 就是啊。。这么几十行代码就给出这么炫的效果。。
看上去很不错啊
@WordPress啦 嗯啊、挺炫的哦。
内容不错，会经常来光顾的！
@威客 欢迎，欢迎哦。。
不见得是这样的
@知网免费帐号 嗯？神马意思？
这系统能干嘛““““也就上上网
目前来看确实使这样。。呵呵、