用JavaScript实现动态图形

touchinsert

浏览: 1334750 次
性别:
来自: 北京

最近访客更多访客>>

yin_bp

u012363178

wangyy

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1629)

社区版块

存档分类

2012-01 ( 61)
2011-12 ( 68)
2011-11 ( 26)
更多存档...

JavaScript F#IE C#C++

用JavaScript实现动态图形

1．JavaScript与2D图形

JavaScript的神奇之处远远超过一般程序员的想象。JavaScript可以实现所有的二维图形。看到我的Blog左面，它就是使用JavaScript和Google公司用JavaScript开发的excanvas写出来的。

It's time to reuse!

什么是excanvas呢？Firefox，Safari和Opera9都支持canvas tag，canvas用来绘制2D图形。但是IE不支持canvas。Google就开发了excanvas，模拟canvas在其他浏览器的状态，这样IE也可以使用canvas了。下面是一组更复杂的图形：

下面是这一组图形的实现。<script type="text/javascript"></script>中，包含了excanvas的内容，因为Blog里不能放.js文件，我只能将excanvas的内容全面拷贝在HTML文件里。后面的function DrawChart(elname)到function DrawChart5(elname)，是绘图的5个方法。这5个方法都是我原文拷贝JavaScript canvas经典例子的源代码。

Html内容中，body tag负责调用这5个方法，其中的参数是canvas tag id。

canvas tag是图形绘制的位置。

<html>

if (!window.CanvasRenderingContext2D) {

(function () {

// alias some functions to make (compiled) code shorter

var m = Math;

var mr = m.round;

var ms = m.sin;

var mc = m.cos;

var G_vmlCanvasManager_ = {

//可以在http://sourceforge.net/projects/excanvas/下载。

}

function DrawChart(elname){

var element=document.getElementById(elname);

var el = G_vmlCanvasManager.initElement(element);

var ctx = el.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 50, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 50, 50);

};

function DrawChart2(elname) {

var start = new Date;

var element=document.getElementById(elname);

var el = G_vmlCanvasManager.initElement(element);

var ctx = el.getContext("2d");

ctx.translate(75,75);

for (i=1;i<6;i++){

ctx.save();

ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (j=0;j<i*6;j++){

ctx.rotate(Math.PI*2/(i*6));

ctx.beginPath();

ctx.arc(0,i*12.5,5,0,Math.PI*2,true);

ctx.fill();

}

ctx.restore();

}

function DrawChart3(elname) {

var start = new Date;

var element=document.getElementById(elname);

var el = G_vmlCanvasManager.initElement(element);

var ctx = el.getContext("2d");

// Draw background

ctx.fillStyle = 'rgb(255,221,0)';

ctx.fillRect(0,0,150,37.5);

ctx.fillStyle = 'rgb(102,204,0)';

ctx.fillRect(0,37.5,150,37.5);

ctx.fillStyle = 'rgb(0,153,255)';

ctx.fillRect(0,75,150,37.5);

ctx.fillStyle = 'rgb(255,51,0)';

ctx.fillRect(0,112.5,150,37.5);

// Draw semi transparent circles

for (i=0;i<10;i++){

ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';

for (j=0;j<4;j++){

ctx.fillRect(5+i*14,5+j*37.5,14,27.5);

}

function DrawChart4(elname) {

var start = new Date;

var element=document.getElementById(elname);

var el = G_vmlCanvasManager.initElement(element);

var ctx = el.getContext("2d");

// draw background

ctx.fillStyle = '#FD0';

ctx.fillRect(0,0,75,75);

ctx.fillStyle = '#<chmetcnv w:st="on" unitname="C" sourcevalue="6" hasspace="False" negative="False" numbertype="1" tcsc="0">6C</chmetcnv>0';

ctx.fillRect(75,0,75,75);

ctx.fillStyle = '#<chmetcnv w:st="on" unitname="F" sourcevalue="9" hasspace="False" negative="False" numbertype="1" tcsc="0">09F</chmetcnv>)';

ctx.fillRect(0,75,75,75);

ctx.fillStyle = '#F30';

ctx.fillRect(75,75,150,150);

ctx.fillStyle = '#FFF';

// set transparency value

ctx.globalAlpha = 0.2;

// Draw semi transparent circles

for (i=0;i<7;i++){

ctx.beginPath();

ctx.arc(75,75,10+10*i,0,Math.PI*2,true);

ctx.fill();

}

function DrawChart5(elname) {

var start = new Date;

var element=document.getElementById(elname);

var el = G_vmlCanvasManager.initElement(element);

var ctx = el.getContext("2d");

ctx.fillStyle = "red";

ctx.beginPath();

ctx.moveTo(30, 30);

ctx.lineTo(150, 150);

ctx.quadraticCurveTo(60, 70, 70, 150);

ctx.lineTo(30, 30);

ctx.fill();

}

</script>

<table>

<tbody>

<tr>

<td>

<div >

</div>

</td>

<td>

<div>

</div>

</td>

<td>

<div>

</div>

</td>

</tr>

<tr>

<td>

<div>

</canvas>

</div>

</td>

<td>

<div>

</canvas>

</div>

</td>

</tr>

</tbody>

</table>

</body>

</html>

2．JavaScript 动态2D图形与数据交换

当我第一次接触http://www.liquidx.net/plotkit/时，我才意识到JavaScript的强大。PlotKit是JavaScript Chart Plotting, 既JavaScript图形开发工具，它将JavaScript的绘图功能封装为三种较复杂的具有数据交互功能的图形，饼状图，矩形图和二维曲线图。

我使用二维曲线图和JavaScript Timer模拟简单的动态股票行情。

如下图，该图每1秒更新一次数据。

var plotter 为绘图对象

var newRows用来显示动态表数据，图中的Last列。

var options 变量为绘图参数。

createData方法生成三组随机数据，既右图的3条变化曲线。

DrawChart更新图形和表数据。

Beginning创建图形和启动Timer。

HTML Body中的

classid="clsid:<chmetcnv w:st="on" unitname="C" sourcevalue="333" hasspace="False" negative="False" numbertype="1" tcsc="0">333C</chmetcnv>7BC4<chmetcnv w:st="on" unitname="F" sourcevalue="460" hasspace="False" negative="True" numbertype="1" tcsc="0">-460F</chmetcnv>-11D0-BC04<chmetcnv w:st="on" unitname="C" sourcevalue="80" hasspace="False" negative="True" numbertype="1" tcsc="0">-0080C</chmetcnv><chmetcnv w:st="on" unitname="a" sourcevalue="7055" hasspace="False" negative="False" numbertype="1" tcsc="0">7055A</chmetcnv>83">

</object>

是从文件table.csv中导入表中的Symbol列和Name列。

table.csv的内容与格式如下：

Symbol,Name

ADBE,Adobe Systems Incorporated

AIG,American International Group Inc

BA,Boeing Company

<div id="chart" width="500" height="300"></div>是显示图形。

<html>

var plotter = null;

var newRows = new Array();

var options = {

"IECanvasHTC": "/plotkit/excanvas.htc",

"backgroundColor":Color.blackColor(),

"drawYAxis": true,

"shouldFill" : true,

"xAxis": [13,18],

"yAxis":[20,50]

};

function createData(){

var data3 = [

[13.00, 49.3+Math.random()*5],

[13.1, 48.2+Math.random()*5],

[13.2, 48.4+Math.random()*5],

[13.3, 48.1+Math.random()*5],

[13.4, 48.6+Math.random()*5],

[13.5, 48.9+Math.random()*5],

[14, 50.1+Math.random()*5],

[14.1, 49.1+Math.random()*5],

[14.2, 49.8+Math.random()*5],

[14.2, 50.2+Math.random()*5],

[14.3, 48.1+Math.random()*5],

[14.4, 51.1+Math.random()*5],

[14.5, 52.1+Math.random()*5],

[15, 48.1+Math.random()*5],

[15.1, 48.2+Math.random()*5],

[15.2, 48.4+Math.random()*5],

[15.3, 48.1+Math.random()*5],

[15.4, 48.6+Math.random()*5],

[15.5, 48.9+Math.random()*5],

[15.5, 49.8+Math.random()*5],

[16, 49.9+Math.random()*5],

[16.1, 48.2+Math.random()*5],

[16.2, 48.4+Math.random()*5],

[16.3, 48.1+Math.random()*5],

[16.4, 48.6+Math.random()*5],

[16.5, 48.9+Math.random()*5],

[16.5, 47.1+Math.random()*5],

[17, 48.1+Math.random()*5],

[17.1, 49.1+Math.random()*5],

[17.2, 49.8+Math.random()*5],

[17.3, 48.1+Math.random()*5],

[17.4, 51.1+Math.random()*5],

[17.5, 48.4+Math.random()*5]];

var data1 = [[13.00, 39.3+Math.random()*5],

[13.1, 38.2+Math.random()*5],

[13.2, 38.4+Math.random()*5],

[13.3, 38.1+Math.random()*5],

[13.4, 38.6+Math.random()*5],

[13.5, 38.9+Math.random()*5],

[14, 40.1+Math.random()*5],

[14.1, 39.1+Math.random()*5],

[14.2, 39.8+Math.random()*5],

[14.2, 40.2+Math.random()*5],

[14.3, 38.1+Math.random()*5],

[14.4, 41.1+Math.random()*5],

[14.5, 42.1+Math.random()*5],

[15, 38.1], [15.5, 39.8+Math.random()*5],

[16, 39.9], [16.5, 37.1+Math.random()*5],

[17, 38.1], [17.5, 38.4+Math.random()*5]];

</sp

分享到：

逛街逛虚了 | LLYF SocketCapture W.I.P.

2006-09-02 17:56
浏览 1391
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论