网页变幻云+canvas时钟

来源：互联网发布：知乎女神王出书编辑：程序博客网时间：2024/05/17 02:34

//本HTML代码主要是制作一个变换云背景，利用了三张透明背景图进行穿插，

//加上蓝黑背景色营造出一种变换的效果。中间div穿插了一个时钟，是利用

//canvas画出来的，可以获取当前时间，加上背景的变幻莫测，整体别具一格。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#mycanvas{position: absolute;/*z-index: 1;*/left: 50%;margin-left: -250px;}.bg-color {width: 100%;height: 500px;position: relative;background-color: #007FD5;animation:change-color 50s ease infinite;}@keyframes change-color{0% {background-color:#007fd5;}50% {background-color:#000000;}100% {background-color:#007fd5;}}.cloud-one{width: 300%;height:500px ;background-image: url(img/cloud_one.png);position: absolute;top: 0;left: 0;animation: cloudmoving1 70s linear infinite;}@keyframes cloudmoving1{from{left: 0px;}to{left: -200%;}}.cloud-two{width: 300%;height:500px ;background-image: url(img/cloud_two.png);position: absolute;top: 0;left: 0;animation: cloudmoving2 100s linear infinite;}@keyframes cloudmoving2{from{left: 0px;}to{left: -200%;}.cloud-three{width: 300%;height:500px ;background-image: url(img/cloud_three.png);position: absolute;top: 0;left: 0;animation: cloudmoving3 120s linear infinite;}@keyframes cloudmoving3{from{left: 0px;}to{left: -200%;}</style></head><body><!--        作者：offline        时间：2017-08-12        描述：canvas:html5新增的画布对象，可以在其中绘制任何的图像，以及线条效果，包括图片        canvas的尺寸应该通过属性进行设置，而不是使用样式进行设置！        --><div class="bg-color"><canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了，实现不了！</canvas><script type="text/javascript">//获取画布对象var mycanvas = document.getElementById('mycanvas');//获取一个2d绘图环境（拿到一支画笔）var ctx = mycanvas.getContext('2d');function draw(){//获取系统时间var nowTime = new Date();var hours = nowTime.getHours();var minutes = nowTime.getMinutes();var seconds = nowTime.getSeconds();//console.info(hours+":"+minutes+":"+seconds);            //防止小时数超过12            hours = hours>12?hours-12:hours;            //精准的设置小时位置            hours = hours+minutes/60;            //清除画布(防止覆盖效果)            ctx.clearRect(0,0,500,500);//初始化画笔的样式ctx.lineWidth = 2; //设置线条的宽度ctx.strokeStyle = '#fff';  //设置线条的颜色ctx.beginPath(); //开始画图路径//设置一个圆形路径ctx.arc(250,250,150,0,360,false);//绘制图形ctx.stroke();ctx.closePath();  //结束画图路径//绘制刻度（时刻度）for(var i=0;i<12;i++){ctx.beginPath();ctx.lineWidth=8;//保存当前绘图环境ctx.save();//重置绘制的起始位置（将圆心位置重置为0.0）ctx.translate(250,250);//转换画布的用户坐标系统//旋转画布到一定的弧度             弧度=角度*PI/180ctx.rotate(i*30*Math.PI/180);//设置绘制线条的起始位置ctx.moveTo(0,140);//设置线条的结束位置ctx.lineTo(0,150);//绘制路劲ctx.stroke();//还原初始的绘图环境ctx.restore();ctx.closePath();}//绘制刻度（分刻度）for(var i=0;i<60;i++){ctx.beginPath();ctx.lineWidth=3;//保存当前绘图环境ctx.save();//重置绘制的起始位置（将圆心位置重置为0.0）ctx.translate(250,250);//转换画布的用户坐标系统//旋转画布到一定的弧度             弧度=角度*PI/180ctx.rotate(i*6*Math.PI/180);//设置绘制线条的起始位置ctx.moveTo(0,140);//设置线条的结束位置ctx.lineTo(0,148);//绘制路劲ctx.stroke();//还原初始的绘图环境ctx.restore();ctx.closePath();}//绘制时针ctx.beginPath();ctx.lineWidth=5;//保存当前绘图环境ctx.save();//重置绘制的起始位置（将圆心位置重置为0.0）ctx.translate(250,250);//转换画布的用户坐标系统//旋转画布到一定的弧度             弧度=角度*PI/180ctx.rotate(hours*30*Math.PI/180);//设置绘制线条的起始位置ctx.moveTo(0,10);//设置线条的结束位置ctx.lineTo(0,-100);//绘制路劲ctx.stroke();//还原初始的绘图环境ctx.restore();ctx.closePath();//绘制分针ctx.beginPath();ctx.lineWidth=3;//保存当前绘图环境ctx.save();//重置绘制的起始位置（将圆心位置重置为0.0）ctx.translate(250,250);//转换画布的用户坐标系统//旋转画布到一定的弧度             弧度=角度*PI/180ctx.rotate(minutes*6*Math.PI/180);//设置绘制线条的起始位置ctx.moveTo(0,10);//设置线条的结束位置ctx.lineTo(0,-120);//绘制路劲ctx.stroke();//还原初始的绘图环境ctx.restore();ctx.closePath();//绘制秒针ctx.beginPath();ctx.lineWidth=1;ctx.strokeStyle='#f00';//保存当前绘图环境ctx.save();//重置绘制的起始位置（将圆心位置重置为0.0）ctx.translate(250,250);//转换画布的用户坐标系统//旋转画布到一定的弧度             弧度=角度*PI/180ctx.rotate(seconds*6*Math.PI/180);//设置绘制线条的起始位置ctx.moveTo(0,10);//设置线条的结束位置ctx.lineTo(0,-126);//绘制路劲ctx.stroke();//还原初始的绘图环境ctx.restore();ctx.closePath();}setInterval(draw,1000);</script><div class="cloud-one"></div><div class="cloud-two"></div><div class="cloud-three"></div></div></body></html>

阅读全文

0 0