eggache_on_graph_by_js
这两天总蛋疼,而且还喜欢用js来治病。寻思着,再这样下去就不务正业了啊,我是干C++的活的啊。这个弄完,冷静一下了得。
很蛋疼,看了几个js1k上面的花眼的demo,自己也想试试。暂时先弄出基本得画点的程度,过很长段时间再按着图形的算法把线的,填充的弄了。
最后就是实现伪3D的程度。但愿自己能走到那一步。
下面的是点的程度,开始想用显存的想法来弄,结果200*150的程度就卡的要死了。果断偷懒。
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
.pt {
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
width: 1px;
height: 1px;
}
#myframe {
margin: 0px;
padding: 0px;
border: 1px solid black;
background-color: white;
height: 150px;
width: 200px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var height = 150;
var width = 200;
function yyBegin() {
document.write("<div id='myframe'>");
}
function yyEnd() {
document.write("</div>");
}
function yyDrawPoint(posX, posY, nr, ng, nb) {
document.write("<div class='pt' id='p_" + posX + "_" + posY + "' style='background-color:rgb(" + nr + "," + ng + "," + nb + "); left:" + (posX - 1) + "px; top:" + (posY - 1) + "px;'></div>");
}
</script>
</head>
<body>
<script type="text/javascript">
yyBegin();
yyDrawPoint(1, 1, 255, 0, 0);
for (var i = 1 + 5; i <= 100 + 5; i++)
{
yyDrawPoint(i, 1 + 5, 255, 0, 0);
}
for (var i = 1 + 5; i <= 100 + 5; i++)
{
yyDrawPoint(i, 100 + 5, 255, 0, 0);
}
for (var i = 1 + 5; i <= 100 + 5; i++)
{
yyDrawPoint(1 + 5, i, 255, 0, 0);
}
for (var i = 1 + 5; i <= 100 + 5; i++)
{
yyDrawPoint(100 + 5, i, 255, 0, 0);
}
for (var i = 0; i <= 1000; i++)
{
var x = (parseInt(Math.random() * 1000)) % 200 + 1;
var y = (parseInt(Math.random() * 1000)) % 150 + 1;
var clr = (parseInt(Math.random() * 1000)) * 1000 % 3 + 1;
yyDrawPoint(x, y, (clr==1?255:0), (clr==2?255:0), (clr==3?255:0));
}
yyEnd();
</script>
</body>
</html>