W3C DOM2样式规范-码农干货系列【8】--世界上最...-HTML5时钟

当前位置: 编程技术>WEB前端

本页文章导读:

▪W3C DOM2样式规范 CSSStyleSheet对象CSSSty'leSheet对象包含所有的样式表，包括外部样式表以及嵌入式样式表（通过<style>标签定义).可以同过documentstyleSheets获得该对象,它具有如下属性:其中cssRules属性在IE中是rules.........

▪码农干货系列【8】--世界上最简单的3D渲染(no webgl) 简介进行上图所示的3D格子地板的渲染，需要进行Canvas的像素级别操作，从视点连接屏幕（屏幕就是canvas）中的所有像素点，形成大量的射线，倘若射线与地板相交，把交点以及交点的颜色.........

▪HTML5时钟本示例使用HTML5的canvas标签和Javascript脚本，在页面上模拟显示了一个时钟，请使用支持HTML5的浏览器预览效果：点击这里查看效果http://www.keleyi.com/keleyi/phtml/html5clock.htm以下是完整代码，保存.........

[1]W3C DOM2样式规范

来源: 发布时间: 2013-11-06

CSSStyleSheet对象

CSSSty'leSheet对象包含所有的样式表，包括外部样式表以及嵌入式样式表（通过<style>标签定义).可以同过documentstyleSheets获得该对象,它具有如下属性:

其中cssRules属性在IE中是rules属性

CSSStyleRule对象

每个CSSStyleSheet对象里面包含一组CSSStyleRule对象，它们具有以下属性:

CSSStyleDeclaration对象

这个对象具有的属性如下:

本文链接

[2]码农干货系列【8】--世界上最简单的3D渲染(no webgl)

来源: 发布时间: 2013-11-06

简介

进行上图所示的3D格子地板的渲染，需要进行Canvas的像素级别操作，从视点连接屏幕（屏幕就是canvas）中的所有像素点，形成大量的射线，倘若射线与地板相交，把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示:

像素操作

在进行3D渲染之前，必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上，在坐标(x ,y)上的像素的index构成如下。

var data=getImageData(0, 0, canvas.width, canvas.height);

红色index：((width * y) + x) * 4 像素值：data[((width * y) + x) * 4]

绿色index：((width * y) + x) * 4 + 1 像素值：data[((width * y) + x) * 4+1]

蓝色index：((width * y) + x) * 4 + 2 像素值：data[((width * y) + x) * 4+2]

透明度index：((width * y) + x) * 4 + 3 像素值：data[((width * y) + x) * 4+3]

修改了任何像素的红、绿、蓝和alpha值之后，可以通过第二个函数来更新canvas上的显示，那就是context.putImageData(imagedata, dx, dy)。

寻找交点

怎么找到射线与地板的交点？可以先列出已知的条件:

视点坐标A、屏幕上的点坐标B、交点P的Y坐标（y=0），向量AP,BP共线。

根据上面的条件，利用两两向量共线(Ax-Px/Bx-Px = Ay-Py/By-Py = Az-Pz/Bz-Pz) 可以推导出交点的坐标。

格子材质

找到交点后，还剩下的问题就是根据z的坐标渲染格子材质，如下面代码所示:

(Math.ceil(cv.x / sideLength) + Math.ceil(cv.z / sideLength)) % 2 === 0 .csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

上面的cv为交点坐标,sideLength为地板格子编程，根据上面的true和false返回相应的颜色值。

在线演示

修改代码里面的变量值点击run again试试！
var Vector3 = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; }; var Camera = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; } var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixels = imgdata.data, i = 0, cm = new Camera(0, 200, 200), sideLength = 100, planeLength = 4400; for (var y = 0; y < canvas.height; y++) { for (var x = 0; x < canvas.width; x++) { var v = new Vector3(-canvas.width / 2 + x, canvas.height - y, 0); var cv = new Vector3(cm.y * v.x / (cm.y - v.y), 0, cm.z * v.y / (v.y - cm.y)); (cv.z > -planeLength && cv.z < 0) && (pixels[i] = pixels[i + 1] = pixels[i + 2] = (Math.ceil(cv.x / sideLength) + Math.ceil(cv.z / sideLength)) % 2 === 0 ? 148 : 0, pixels[i + 3] = 255 * (planeLength - Math.abs(cv.z)) / planeLength); i += 4; } } ctx.putImageData(imgdata, 0, 0);

function executeCode() { eval(document.getElementById( 'code').value); }

Have Fun!

本文链接

[3]HTML5时钟

来源: 发布时间: 2013-11-06

本示例使用HTML5的canvas标签和Javascript脚本，在页面上模拟显示了一个时钟，请使用支持HTML5的浏览器预览效果：
点击这里查看效果http://www.keleyi.com/keleyi/phtml/html5clock.htm

以下是完整代码，保存到html文件可以查看效果。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>HTML5时钟-柯乐义</title>
</head>
<body>
<div><a href="http://www.keleyi.com" target="_blank">柯乐义</a> <a href="http://www.keleyi.com/a/bjac/4f6d3873d0571805.htm" target="_blank">原文</a>
<h1>HTML5时钟</h1>
<canvas id="canvas" width="200" height="200" >柯乐义提示您，请使用支持HTML5的浏览器，例如Chrome,IE9,IE10,Firefox等。</canvas>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (ctx) {
var timerId;
var frameRate = 60;
function canvObject() {
this.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = function () {
if (!this.ctx) throw new Error('柯乐义提示：您没指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);
if (this.draw) this.draw(ctx);
if (this.fill) ctx.fill();
ctx.stroke();
ctx.restore();
}
};
function Line() { };
Line.prototype = new canvObject();
Line.prototype.fill = false;
Line.prototype.start = [0, 0];
Line.prototype.end = [5, 5];
Line.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.moveTo.apply(ctx, this.start);
ctx.lineTo.apply(ctx, this.end);
ctx.closePath();
};

function Circle() { };
Circle.prototype = new canvObject();
Circle.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
ctx.closePath();
};

var circle = new Circle();
circle.ctx = ctx;
circle.x = 100;
circle.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillColor = '#ffffff';

var hour = new Line();
hour.ctx = ctx;
hour.x = 100;
hour.y = 100;
hour.borderColor = "#000000";
hour.borderWidth = 10;
hour.rotation = 0;
hour.start = [0, 20];
hour.end = [0, -50];

var minute = new Line();
minute.ctx = ctx;
minute.x = 100;
minute.y = 100;
minute.borderColor = "#333333";
minute.borderWidth = 7;
minute.rotation = 0;
minute.start = [0, 20];
minute.end = [0, -70];

var seconds = new Line();
seconds.ctx = ctx;
seconds.x = 100;
seconds.y = 100;
seconds.borderColor = "#ff0000";
seconds.borderWidth = 4;
seconds.rotation = 0;
seconds.start = [0, 20];
seconds.end = [0, -80];

var center = new Circle();
center.ctx = ctx;
center.x = 100;
center.y = 100;
center.radius = 5;
center.fill = true;
center.borderColor = 'orange';

for (var i = 0, ls = [], cache; i < 12; i++) {
cache = ls[i] = new Line();
cache.ctx = ctx;
cache.x = 100;
cache.y = 100;
cache.borderColor = "orange";
cache.borderWidth = 2;
cache.rotation = i * 30;
cache.start = [0, -70];
cache.end = [0, -80];
}

timerId = setInterval(function () {
// 清除画布
ctx.clearRect(0, 0, 200, 200);
// 填充背景色
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 200, 200);
// 表盘
circle.update();
// 刻度
for (var i = 0; cache = ls[i++]; ) cache.update();
// 时针
hour.rotation = (new Date()).getHours() * 30;
hour.update();
// 分针
minute.rotation = (new Date()).getMinutes() * 6;
minute.update();
// 秒针
seconds.rotation = (new Date()).getSeconds() * 6;
seconds.update();
// 中心圆
center.update();
}, (1000 / frameRate) | 0);
} else {
alert('柯乐义提示：您的浏览器不支持HTML5无法预览.');
}
</script>
</body>
</html>

本文转载自柯乐义