javascript 客户端画图

来源：互联网发布：c语言双引号if 编辑：程序博客网时间：2024/05/16 06:48

脚本化图像

对<img>的脚本化处理.

图像和0级别的DOM

0级别的DOM允许通过Document对象的images[]数组来访问它们.也可以通过1级DOM的getElementById()和getElementByTagName()来访问.

document.images[]是按出现顺序获取图片的,也可以按照name来获取,如下:

document.images["nextpage"]或document.images.nextpage

传统的图像翻滚

代码如下,仅供参考

屏幕外图像和缓存

示例代码如下

无干扰的图像翻滚

function addRollover(img,rolloverURL){

if(typeof img=="string"){

var id=img;

img=null;

if(document.getElementById)img=document.getElementById(id);

else if(document.all)img=document.all[id];

if(!img)img=document.images[id];

if(!img)return;

}

if(img.tagName.toLowerCase()!="img")return;

var baseURL=rolloverURL;

(new Image()).src=rolloverURL;

img.onmouseover=function(){img.src=rolloverURL;}

img.onmouseout=function(){img.src=baseURL;}

}

function initRollovers(){

var images=document.getElementByTagName("img");

for(var i=0;i<images.length;i++){

var image=images[i];

var rolloverURL=image.getAttribute("rollover");

if(rolloverURL)addRoller(image,rolloverURL);

}

//初始化绑定

if(window.addEventListener)window.addEventListener("load",initRollovers,false);

else if(window.attachEvent)window.attachEvent("onload",initRollovers);

//html上，实现翻滚的属性设置

图像动画

图像动画的实现就是以一段很短的时间为间隔，不断的更改图片的src。由于人眼的视觉效果，使其看起来就像一直在变动。

javascript组件代码：

function ImageLoop(imageId,fps,frameURLs){

this.imageId=imageId;

this.frameInterval=1000/fps;

this.frames=new Array(frameURLs.length);

this.image=null;

this.loaded=false;

this.loadedFrames=0;

this.startOnLoad=false;

this.frameNumber=-1;

this.timer=null;

for(var i=0;i<frameURLs.length;i++){

this.frame[i]=new Image();

this.frames[i].onload=countLoadFrames;

this.frames[i].src=frameURLs[i];

}

var loop=this;

function countLoadedFrames(){

loop.loadedFrames++;

if(loop.loadedFrames==loop.frames.length){

loop.loaded=true;

if(loop.startOnLoad)loop.start();

}

this._displayNextFrame=function(){

loop.frameNumber=(loop.frameNumber+1)%loop.frames.length;

loop.image.src=loop.frames[loop.frameNumber].src;

};

}

ImageLoop.prototype.start=function(){

if(this.timer!=null)return;

if(!this.loaded)this.startOnLoad=true;

else{

if(!this.image)this.image=document.getElementById(this.imageId);

this._displayNextFrame();

this.timer=setInterval(this._displayNextFrame,this.frameInterval);

};

}

ImageLoop.prototype.stop=function(){

if(this.timer)clearInterval(this.timer);

this.timer=null;

}

javascript调用代码：

var animation=new ImageLoop("loop",5,["images/0.gif","images/1.gif","images/2.gif","images/3.gif"]);

html控件代码：

<button onclick="animation.start()">Start</button>

使用css画图

下面是一个css画图的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css画图</title>

function makeBarChart(data,width,height,barcolor){

if(!width)width=500;

if(!height)height=350;

if(!barcolor)barcolor="blue";

width-=24;

height-=14;

var chart=document.createElement("div");

chart.style.position="relative";

chart.style.width=width+"px";

chart.style.height=height+"px";

chart.style.border="solid black 2px";

chart.style.paddingLeft="10px";

chart.style.paddingRight="10px";

chart.style.paddingTop="10px";

chart.style.paddingBottom="0px";

chart.style.backgroundColor="white";

var barwidth=Math.floor(width/data.length);

var maxdata=Math.max.apply(this,data);

var scale=height/maxdata;

for(var i=0;i<data.length;i++){

var bar=document.createElement("div");

var barheight=data[i]*scale;

bar.style.position="absolute";

bar.style.left=(barwidth*i+1+10)+"px";

bar.style.top=height-barheight+10+"px";

bar.style.width=(barwidth-2)+"px";

bar.style.height=(barheight-1)+"px";

bar.style.border="solid black 1px";

bar.style.backgroundColor=barcolor;

bar.style.fontSize="0px";

chart.appendChild(bar);

}

return chart;

}

function drawChart(){

var chart=makeBarChart([1,2,4,8,16,32,64,128,256],600,300);

var container=document.getElementById("chartContainer");

container.appendChild(chart);

}

</script>

</head>

<i>Note that each bar is twice as height as the one before it -- a charactistic of exponential growth</i>

</body>

</html>

运行结果会是一个直方图的样子

SVG绘图与canvas绘图基本的功能一样，侧重点不同。svg侧重编辑修改，canvas方便js代码控制。在实现上，svg是XML类型的，canvas是js类型的。