前言：
此时你们对“htmlcss时间轴”大体比较关心，你们都需要学习一些“htmlcss时间轴”的相关资讯。那么小编在网络上汇集了一些对于“htmlcss时间轴””的相关资讯，希望朋友们能喜欢，各位老铁们快快来了解一下吧！HTML5为了更好地处理今天的互联网应用，添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。
HTML5的<canvas>标签可以定义图形，比如图表和其他图像。该标签是基于 JavaScript 的绘图 API。
如想完成这样一个任务，画一个包含时间轴的世界历史年表，如下图所示：
要完成上述任务，便可以使用HTML5+CSS+JS，代码如下：
<!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+30*14;
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=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,"");
txtR(-0,"");
</script>
</body>
</html>
标签： #htmlcss时间轴
