目前只实现单机版本，下一步将其转为网络版本。
演示地址：中国象棋 [使用Google Chrome运行]
指定某一点作为原点旋转图形
没有使用canvas的（translate, transform, rotate, scale等），用原始的方式计算出旋转后的坐标。
演示地址：rotate (http://www.live83.cn/demos/rotate.html) [Google Chrome测试运行]
坐标系统：coordinate完成大部分功能。
接下来继续完善，实现一套报表视图绘制框架，同时实现对绘制的图形作为元件处理（包括实现元件的碰撞测试、动画等功能）。
Canvas的功能很强大，HTML5很强大，但运行快不快，也要看机器配置和浏览器的JS引擎的效率了。
时间太久，有些数学基础都需要想一会，接下来就是要好好把微积分、线性代数等等等复习，运用到计算机编程中，才能真正享受编程这份乐趣。
Posted in 默认分类
Leave a comment
我拿什么来吸引你——Mobile Web Design
各式或华丽，或炫目，或让人迷惑，或让人叹服的Web Design已经愉悦我们很长很长的日子了。 可是，当有一天我们发现了一个新事物——用手机上网，在手机上看网页，我们看到了一种不一样Web，这种网页大家通常叫他们Wap页面，这种页面形式用简 洁的视觉效果，清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。
Posted in 其它
Leave a comment
Simple Math Plotter
输入简单的函数f(x)，变量为 x，如：f(x) = sin(x)
演示：Math Plotter[Google Chrome测试运行]
Copyright (C) 2012 Alen D. Archuleta (zeafoo@gmail.com)
Posted in 默认分类
Leave a comment
圆与正弦曲线的关系
这次的DEMO演示一个圆与正弦曲线的关系，演示地址：sine curve and circle[Google Chrome测试运行]
Copyright (C) 2012 Alen D. Archuleta
Posted in 默认分类
Leave a comment
[纯属无聊]HTML5-Canvas实现一个时钟
钟盘画得比较粗糙！代码都是随便写的，没有去简化它！代码见演示地址的页面源代码。
演示地址：clock (http://www.live83.cn/demos/clock.html)
Posted in 默认分类
Leave a comment
[纯属无聊]HTML5-Canvas实现一个简单坐标系统玩一下
1、可以使用鼠标中键调整坐标系统的比例
2、点击画布调整坐标系的原点
3、只在Google Chrome上测试过
4、演示地址：demo
<html>
<head>
<script type="text/javascript">
var $ = function() {
return document.getElementById(arguments[0]);
};
</script>
</head>
<body>
<canvas id="c" width="1024" height="800"></canvas>
<script type="text/javascript">
/**
Copyright (C) 2012 Alen D. Archuleta
A Simple Coordinate System
*/
var canvas = $("c");
canvas.width = document.documentElement.offsetWidth - 100;
var g = canvas.getContext("2d");
// 虚拟坐标系统的一个单位对应实际坐标系统的长度
var n = 30.0;
// 长度比例
var ratio = 1 / n;
var xmarks = canvas.width / n;
var ymarks = canvas.height / n;
// 默认原点
var point = {x: 100, y: 100};
// 画一个小小的圆点
var drawDot = function(x, y, r) {
if (!r) r = 5;
g.beginPath();
g.arc(x, y, r, 0, 2 * Math.PI, false);
g.fill();
};
// 画直线
var drawLine = function (x1, y1, x2, y2, lineWidth) {
if (lineWidth) {
g.lineWidth = lineWidth;
}
var tempStyle = g.strokeStyle;
if (lineWidth < 3)
g.strokeStyle = "#ffcc00";
g.beginPath();
g.moveTo(x1, y1);
g.lineTo(x2, y2);
g.stroke();
g.strokeStyle = tempStyle;
};
var drawXAxis = function(y, lw) {
drawLine(0, y, canvas.width, y, lw);
};
var drawYAxis = function(x, lw) {
drawLine(x, canvas.height, x, 0, lw);
};
// 画X坐标和Y坐标
var drawAxis = function(x, y) {
drawDot(x, y);
drawYAxis(x, 3); drawXAxis(y, 3);
};
// 画坐标表格
var drawGrid = function(px, py, w, h) {
var i = 0 ;
for (var x = px + n ; x < w; x += n) {
drawYAxis(x, 1);
g.fillText("" + (++i), x , py + 12);
}
i = 0;
for (var x = px - n; x > 0; x -= n) {
drawYAxis(x, 1);
g.fillText("" + (--i), x, py + 12);
}
i = 0;
for (var y = py + n ; y < h; y += n) {
drawXAxis(y, 1);
g.fillText("" + (--i), px - 15, y);
}
i = 0;
for (var y = py - n ; y > 0; y -= n) {
drawXAxis(y, 1);
g.fillText("" + (++i), px - 15, y);
}
};
// 在虚拟坐标系统中画线
var drawVirtualLine = function (x1, y1, x2, y2) {
var p = translate(x1, y1);
g.beginPath();
g.moveTo(p.x, p.y);
p = translate(x2, y2);
g.lineTo(p.x, p.y);
g.stroke();
};
//
var draw = function(x, y) {
g.clearRect(0, 0, canvas.width, canvas.height);
// 绘制坐标系统
// 绘制表格
drawGrid(x, y, canvas.width, canvas.height);
// 绘制X轴和Y轴
drawAxis(x, y);
// 画点(-5, 0) 到点(6, 5)的直线
drawVirtualLine(-5, 0, 6, 5);
drawVirutalDot(4, -5);
var m = 100;
var dx = Math.PI * 4 / m;
var sx = 0, sy = 0;
var p = translate(sx, sy);
var f = function(vx) { return 3 * Math.sin(vx); }
// 正弦线 f(x) = 3 * sin(x)
g.beginPath();
g.moveTo(p.x, p.y);
for (var i = 0 ; i < m; i++) {
sx += dx;
sy = f(sx);
p = translate(sx, sy);
g.lineTo(p.x, p.y);
}
g.stroke();
// 抛物线 f(x) = 1/7 * x^2
f = function(vx) { return 1/7 * vx * vx; };
sx = -10;
dx = Math.abs(sx) * 2 / m;
sy = f(sx);
p = translate(sx, sy);
g.beginPath();
g.moveTo(p.x, p.y);
for (var i = 0; i < m; i++) {
sx += dx;
sy = f(sx);
p = translate(sx, sy);
g.lineTo(p.x, p.y);
}
g.stroke();
};
// 将虚拟坐标转换为实际的坐标
var translate = function(x, y) {
var realx = x / ratio;
var realy = -y / ratio;
return {
x : realx + point.x,
y : realy + point.y
};
};
// 在虚拟坐标系统中画点
var drawVirutalDot = function(x, y) {
var p = translate(x, y);
drawDot(p.x, p.y);
};
// 点击后，更新原点，重新绘制虚拟坐标系统
canvas.addEventListener("click", function(e) {
point.x = e.offsetX || e.clientX;
point.y = e.offsetY || e.clientY;
draw(point.x, point.y);
}, false);
// 鼠标中键更新长度比例并重绘
var mousewheelEvent = (/Firefox/i.test(navigator.userAgent))
? "DOMMouseScroll" : "mousewheel";
canvas.addEventListener(mousewheelEvent, function(e) {
// alert([e, e.wheelDelta])
if (e.wheelDelta < 0.) n -= 10.;
else n += 10.;
if (n <= 30.) n = 30.;
if (n > 200.) n = 200.;
ratio = 1 / n;
draw(point.x, point.y);
}, false);
draw(point.x , point.y);
</script>
</body>
</html>
Posted in 默认分类
Leave a comment
Sine Curve using HTML5
因为最近一位同事问及如何使用程序画一个组织结构图。这让我又去接触一个不太熟悉但又有所了解的一个领域——计算机图形学。计算机图形学总会让我想到数学，因为它运用数学的知识较多，除数据结构和算法设计之外，也是一个让人需要思考非常多，运用数学知识非常频率的一个领域。就用HTML5来学习使用程序绘画的基础知识，来慢慢温习基础数学知识，顺便学习一下HTML5里边的Canvas的API。
HTML5，确实是让振奋的一个版本，至于它是多么振奋就自己去体会了。下面以一条正弦曲线开始
<html>
<head>
<script type="text/javascript">
var $ = function() { return document.getElementById(arguments[0]);};
</script>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = $("c");
var g = canvas.getContext("2d");
var xratio = 2 * Math.PI / 200; // X坐标长度比例因子
var yratio = xratio; // Y坐标长度比例因子
var yDisplacement = 100; // Y坐标值的位移量
var N = 30; // 计算X坐标N份增量
var dx = Math.PI * 2 / N; // 增量值（微分N份增量）
// 按X比例因子计算真实的X坐标
var real = function (raw, ratio) { return raw / ratio; };
// 按Y比例因子计算真实的Y坐标，加上Y坐标的位移量
var realy = function (y, ratio, disp) { return real(y, ratio) + disp; };
var x = 0;
var y = 0;
var px, py;
g.beginPath();
g.moveTo(x, y + yDisplacement);
for (var i = 0 ; i < N ; i++) {
x += dx;
y = Math.sin(x);
px = real(x, xratio);
py = realy(y, yratio, yDisplacement);
console.log([xratio, yratio, x, y, px, py]);
g.lineTo(px, py);
}
g.stroke();
</script>
</body>
</html>
Posted in 默认分类
Leave a comment
IA32笔记–前言
是的！想实现一个x86的汇编器与反汇编器，所以，一有时间就读Intel-x86官方手册。
无论实现哪种CPU体系架构的汇编器或把汇编器，无非就是要完全掌握该CPU对应的指令集和指令格式。
说起来，IA32指令集为CISC指令集，每个指令的长度不确定，编码/解码起来确实比定长RISC指令集（如：MIPS/ARM等）麻烦而且复杂得多，但更具有挑战性。因此，本次的目标是实现一个简单的x86(32位)汇编器和反汇编器，通过它来深入对IA32体系结构的认识。
本类别的文章记录学习的过程。
Posted in IA32笔记, X86 Resources
Leave a comment