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

如想完成这样一个任务，画一个包含韶光轴的天下历史年表，如下图所示：

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

html5横向时间轴HTML5JS｜一个包括时光轴的世界汗青年表 GraphQL

<!DOCTYPE html>

<html><title>historyTidePrev</title>

<style type=\"大众text/css\"大众>

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

width:350px;

float:left;

padding-left:56px;

padding-right:30px;

}

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

width:500px;

float:left;

padding-left:38px;

}

p{

line-height:16px;

margin:0;

padding:0;

text-indent:-2em;

}

</style>

<script>

function scrol...(){

var scl=document.body.scrollHeight/2+3014;

window.scrollBy(0,scl);

}

</script>

<canvas id=\"大众myCanvas2\公众 width=\公众974\公众 height=\"大众29418\公众 style=\"大众border:0px solid #d3d3d3;\公众>

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

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=nianYprevnianPX; //公元前有多少年及像素；

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

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

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

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

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

var fontsi=nianPX3;//字体大小

var fontsi10=nianPX4;

var fontsi100=nianPX5;

//长竖线

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+=nianPX5){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL1.5,i);

ctx.strokeStyle = \"大众rgba(0, 0, 0, 0.6)\公众;

ctx.stroke();

}

//10年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX10){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL2,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-nianL2,i+6);

}

}

//100年横线和文本

for(i=dingJiange;i<=Ycor+jianGe;i+=nianPX100){

ctx.beginPath();

ctx.moveTo(Xcor,i);

ctx.lineTo(Xcor-nianL3,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-nianL3,i+8);

}

function txtL(year0,txt){

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

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

var yp;

if(year0>=0){

yp=dingJiange+nianYprevPx+year0nianPX;

txt=\"大众\"大众 + year0 + \"大众年,\公众 + txt;

}else{

yp=dingJiange+nianYprevPx+year0nianPX;

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的字符(4412=535)；

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

var txtW=121;//手工算出是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+year0nianPX;

txt=\"大众\"大众 + year0 + \"大众年，\"大众 + txt;

}else{

yp=dingJiange+nianYprevPx+year0nianPX;

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的字符(4412=535)；

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

var txtW=121;//手工算出是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,\"大众\"大众);

txtR(-0,\"大众\"大众);

</script>

</body>

</html>