HTML模拟图形
<html>
<head>
<style>
html, body, div
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.Point
{
background-color: #009999;
position: absolute;
}
.PointRed
{
background-color: Red;
position: absolute;
}
.PointBlue
{
background-color: Blue;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
var videoCard = new videoCardEntity();
videoCard.Init();
}
var videoCardEntity = function () {
var self = this;
self.System = new System();
//Config
self.config = {
resolutionX: 300,
resolutionY: 200,
maxFrames: 30,
scaling: 1,
baseBgColor: 'Point',
displayArea: document.getElementById("Area")
};
//Per pixelPoint
self.pixelPoint = {
index: 0,
x: 10,
y: 0,
color: 0,
pointer: null
};
self.Status = {
isInit: false
};
//Begin init
self.Init = function () {
if (self.Status.isInit) return;
var DisplayContent = "";
var dp = self.config.scaling;
var baseBgColor = self.config.baseBgColor;
self.System.Timer.StartWatcher();
for (var y = 0; y < self.config.resolutionY; y++) {
for (var x = 0; x < self.config.resolutionX; x++) {
var rx = x * dp;
var ry = y * dp;
DisplayContent += "<div class='" + baseBgColor + "' style='left:" + rx + "px; top:" + ry + "px;height:" + dp + "px;width:" + dp + "px;'></div>";
}
}
self.config.displayArea.innerHTML = DisplayContent;
self.System.Message.Show("Init Video Memory: ");
self.System.Timer.StopWatcher();
self.Status.isInit = true;
}
Self.AutoScann = function () {
}
}
var System = function () {
var self = this;
self.Config = {
displayArea: document.getElementById("Message")
};
self.Timer = {
ms: new Date(),
StartWatcher: function () {
self.Timer.ms = new Date();
},
StopWatcher: function () {
var usedTime = new Date().getTime() - self.Timer.ms.getTime();
self.Config.displayArea.innerHTML += "<div style=' padding-left:10px; '>Timer used: " + usedTime + " ms</div>";
}
};
self.Message = {
Show: function (message) {
self.Config.displayArea.innerHTML += "<div style='color:green;'>" + message + "</div>";
}
};
}
</script>
</head>
<body>
<div id="Area">
</div>
<div id="Debug" style="position: absolute; bottom: 0px; height: 100px; overflow-x:hidden;">
<div id="Message" style=" height:18px; width:100%;">
</div>
</div>
</body>
</html>
