HTML5+JS｜一个包含时间轴的世界历史年表

小智雅汇 10-15 650

前言：

眼前看官们对“html5竖线标签”大约比较注重，小伙伴们都需要知道一些“html5竖线标签”的相关文章。那么小编同时在网上搜集了一些对于“html5竖线标签””的相关资讯，希望看官们能喜欢，看官们一起来了解一下吧！

HTML5为了更好地处理今天的互联网应用，添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

HTML5的<canvas>标签可以定义图形，比如图表和其他图像。该标签是基于 JavaScript 的绘图 API。

如想完成这样一个任务，画一个包含时间轴的世界历史年表，如下图所示：

要完成上述任务，便可以使用HTML5+CSS+JS，代码如下：

<!DOCTYPE html>

<html><title>historyTidePrev</title>

.left{/*total 974,竖线起始位置：436px*/

width:350px;

float:left;

padding-left:56px;

padding-right:30px;

}

.right{/*竖线起始位置：436px*/

width:500px;

float:left;

padding-left:38px;

}

line-height:16px;

margin:0;

padding:0;

text-indent:-2em;

}

</style>

function scrol...(){

var scl=document.body.scrollHeight/2+30*14;

window.scrollBy(0,scl);

}

</script>

Your browser does not support the HTML5 canvas tag.

</canvas>

var c=document.getElementById("myCanvas2");

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

var canvasW=974;

var dingJiange=18; //顶端间隔竖线起始位置(Y轴）

var diJiange=0; //底部间隔竖线起始位置(Y轴）

var jianGe=dingJiange+diJiange;

var Xcor=436; //竖线X坐标的起始位置；

//因最小的字体需要12它，所以下面的定位需要达到12；

var nianPX=14; //一年间隔使用的像素；

var nianYprev=2100; //公元前有多少年开始

var nianYnex=0;//公元前后多少年结束

var nianYprevPx=nianYprev*nianPX; //公元前有多少年及像素；

var nianYnexPx=nianYnex*nianPX; //公元后有多少年及像素；

var Ycor=nianYprevPx+nianYnexPx; //竖线Y坐标的终点位置（长度）；

var nianL=8; //年线段的长度；

var nianL10=20; //10年线段的长度；

var nianL100=30; //100年线段的长度；

var fontsi=nianPX*3;//字体大小

var fontsi10=nianPX*4;

var fontsi100=nianPX*5;

//长竖线

ctx.beginPath();

ctx.moveTo(Xcor,dingJiange);

ctx.lineTo(Xcor,Ycor+diJiange);

ctx.stroke();

//年横线

for(i=dingJiange;i<=Ycor+diJiange;i+=nianPX){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.4)";

ctx.stroke();

}

//5年横线

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*5){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*1.5,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.6)";

ctx.stroke();

}

//10年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*10){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*2,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.8)";

ctx.stroke();

ctx.textAlign="right";

var varmid=(i-dingJiange)/nianPX;

if(varmid%100!=0){

ctx.font="12px 宋体"; //30px 可以写在里面

// Create gradient

var gradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.fillStyle=gradient;

ctx.fillText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*2,i+6);

}

//100年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX*100){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL*3,i);

ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";

ctx.stroke();

ctx.textAlign="right";

ctx.font="18px 宋体"; //30px 可以写在里面

// Create gradient

var gradient=ctx.createLinearGradient(0,0,c.width,0);

gradient.addColorStop("0","magenta");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// Fill with gradient

ctx.strokeStyle=gradient;

ctx.strokeText((i-dingJiange)/nianPX-nianYprev,Xcor-nianL*3,i+8);

}

function txtL(year0,txt){

var xc=Xcor-nianL-65; //左边的线条从右边开始到左边结束的位置；

var xc2=10;//左边文本从左边开始的位置；

var yp;

if(year0>=0){

yp=dingJiange+nianYprevPx+year0*nianPX;

txt="" + year0 + "年," + txt;

}else{

yp=dingJiange+nianYprevPx+year0*nianPX;

yearp=year0*(-1);

txt="前" + yearp + "年," + txt;

}

ctx.fillStyle="#00f";

ctx.beginPath();

ctx.moveTo(Xcor-60,yp);

ctx.lineTo(xc+xc2-25,yp);

ctx.stroke();

ctx.font="12px Verdana";

ctx.fillStyle="#000";

ctx.textAlign="left";

//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容纳46个12px的字符(44*12=535)；

var txtN;//右边屏幕可容纳字符串个数；

var txtW=12*1;//手工算出是0.945;txtW是一个字符串的宽度；

txtN=Math.floor(xc/txtW);

if(txt.length>txtN){

var fortime=Math.ceil(txt.length/txtN);//需要循环的次数；

ctx.fillText(txt.substring(0,txtN),xc2,yp);

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

yp=yp+14;

txt=txt.substring(txtN);

var txt2=" "+txt.substring(0,txtN);

ctx.fillText(txt2,xc2,yp);

}

}else{

ctx.fillText(txt,xc2,yp);

}

function txtR(year0,txt){

var xc=Xcor+nianL100;

var yp;

if(year0>=0){

yp=dingJiange+nianYprevPx+year0*nianPX;

txt="" + year0 + "年，" + txt;

}else{

yp=dingJiange+nianYprevPx+year0*nianPX;

yearp=year0*(-1);

txt="前" + yearp + "年，" + txt;

}

ctx.fillStyle="#00f";

ctx.beginPath();

ctx.moveTo(Xcor+3,yp);

ctx.lineTo(xc,yp);

ctx.stroke();

ctx.font="12px Verdana";

ctx.fillStyle="#000";

ctx.textAlign="left";

//xc的位置是xc=Xcor+nianL100＝974－436－30＝508，可以容纳46个12px的字符(44*12=535)；

var txtN;//右边屏幕可容纳字符串个数；

var txtW=12*1;//手工算出是0.945;txtW是一个字符串的宽度；

txtN=Math.floor((canvasW-xc)/txtW);

if(txt.length>txtN){

var fortime=Math.ceil(txt.length/txtN);//需要循环的次数；

ctx.fillText(txt.substring(0,txtN-4),xc,yp);

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

yp=yp+14;

txt=txt.substring(txtN-4);

var txt2=" "+txt.substring(0,txtN-4);

ctx.fillText(txt2,xc,yp);

}

}else{

ctx.fillText(txt,xc,yp);

}

txtR(-580,"毕达哥拉斯(约-580～-500年)古希腊数学家、哲学家创立毕达哥拉斯学派，提出毕达哥拉斯定理、数和谐说和灵魂轮回说。");

txtR(-563,"释迦牟尼约-563～前483年佛教创始人建立了完整的佛教教义学说。");

txtL(-551,"孔子-551.9.28--479.4.11，春秋时期鲁国人.");

txtR(-552,"孙武齐国乐安人,汉族.公元前527年，年仅25岁的孙武完成旷世圣书——《孙子兵法》。");

txtR(-427,"公元前427～前348／347)年古希腊哲学家柏拉图创立“学园派”，建立以“理念论”为核心的客观唯心主义哲学体系。");

txtR(-384,"前4世纪，希腊亚里士多德(公元前384年-公元前322年)对数学、动物学等进行综合研究。");

txtR(-0,"");

</script>

</body>

</html>

本文地址：http://www.longkongtuishu.com/caeaaAmsCDVQPC1I.html

标签： #html5竖线标签