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>



posted on 2012-02-16 10:39  shizuka  阅读(203)  评论(0编辑  收藏  举报

导航