【Canvas与艺术】绘制一款色彩斑斓的调色盘状时钟表盘
【效果】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>调色盘时钟表</title> <style type="text/css"> .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="centerlize"> <canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ // canvas的绘图环境 var ctx; // 边长 const LENGTH=512; // 舞台对象 var stage; //------------------------------- // 初始化 //------------------------------- function init(){ // 获得canvas对象 var canvas=document.getElementById('myCanvas'); // 初始化canvas的绘图环境 ctx=canvas.getContext('2d'); ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央 // 准备 stage=new Stage(); stage.init(); } // 每一秒调用paintClock函数 setInterval(paintClock,1000); //------------------------------- // 绘制时钟 //------------------------------- function paintClock(){ stage.update(); stage.paintBg(ctx); stage.paintFg(ctx); } // 舞台类 function Stage(){ // 初始化 this.init=function(){ } // 更新 this.update=function(){ } // 画背景 this.paintBg=function(ctx){ ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏 // 黑圈 ctx.strokeStyle="black"; ctx.lineWidth=6; ctx.beginPath(); ctx.arc(0,0,250,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); // 橙圈 ctx.strokeStyle="orange"; ctx.lineWidth=6; ctx.beginPath(); ctx.arc(0,0,244,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); // 画十二块调色盘 var colors=["rgb(228,130,18)","rgb(60,94,136)","rgb(50,143,151)","rgb(88,193,215)", "rgb(36,141,126)","rgb(137,99,142)","rgb(198,203,47)","rgb(21,152,205)", "rgb(221,188,24)","rgb(57,93,137)","rgb(196,204,28)","rgb(195,33,24)"]; ctx.strokeStyle="white"; ctx.lineWidth=4; const r1=140; const r2=240; for(var i=0;i<12;i++){ var startAngle=Math.PI/12+i*Math.PI/6-Math.PI/2; var endAngle=startAngle+Math.PI/6; var xs1=r1*Math.cos(startAngle); var ys1=r1*Math.sin(startAngle); var xs2=r2*Math.cos(startAngle); var ys2=r2*Math.sin(startAngle); var xe1=r1*Math.cos(endAngle); var ye1=r1*Math.sin(endAngle); var xe2=r2*Math.cos(endAngle); var ye2=r2*Math.sin(endAngle); ctx.beginPath(); ctx.moveTo(xs1,ys1); ctx.lineTo(xs2,ys2); ctx.arc(0,0,r2,startAngle,endAngle,false); ctx.lineTo(xe2,ye2); ctx.lineTo(xe1,ye1); ctx.arc(0,0,r1,endAngle,startAngle,true); ctx.closePath(); ctx.stroke(); ctx.fillStyle=colors[i]; ctx.fill(); } // 写小时数 var hours=["3","4","5","6","7","8","9","10","11","12","1","2"]; for(var i=0;i<12;i++){ var theta=Math.PI/6*i; var x=180*Math.cos(theta); var y=180*Math.sin(theta); ctx.fillStyle="white"; ctx.font="30px Arial"; ctx.textAlign="center"; ctx.textBaseLine="Middle"; ctx.fillText(hours[i],x,y+12); } // 写分钟刻度 for(var i=1;i<61;i++){ var theta=i*Math.PI/30-Math.PI/2; var x=220*Math.cos(theta); var y=220*Math.sin(theta); if((i % 5)==0){ ctx.fillStyle="red"; ctx.beginPath(); ctx.arc(x,y-3,8,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } ctx.fillStyle="white"; ctx.font="8px Arial"; ctx.textAlign="center"; ctx.textBaseLine="Middle"; ctx.fillText(i,x,y); } // 内橙圈 ctx.fillStyle="rgb(245,167,59)"; ctx.beginPath(); ctx.arc(0,0,138,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); // 内圈刻度 for(var i=0;i<60;i++){ var theta=i*Math.PI/30; var x1=134*Math.cos(theta); var y1=134*Math.sin(theta); var x2=130*Math.cos(theta); var y2=130*Math.sin(theta); ctx.lineWidth=1; ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.closePath(); ctx.stroke(); } // 内圈小时数 var innerHours=["15","16","17","18","19","20","21","22","23","24","13","14"]; for(var i=0;i<12;i++){ var theta=Math.PI/6*i; var x=120*Math.cos(theta); var y=120*Math.sin(theta); ctx.fillStyle="black"; ctx.font="10px Arial"; ctx.textAlign="center"; ctx.textBaseLine="Middle"; ctx.fillText(innerHours[i],x,y+4); } // 内天蓝圈 ctx.fillStyle="rgb(83,194,214)"; ctx.beginPath(); ctx.arc(0,0,80,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); } // 画前景 this.paintFg=function(ctx){ // 得到当前时间 var now=new Date(); var s=now.getSeconds(); var m=now.getMinutes(); var h=now.getHours()+m/60; // 画时针 ctx.save(); ctx.rotate(h*Math.PI/6); ctx.strokeStyle="#060000"; ctx.lineWidth=6; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-150); ctx.closePath(); ctx.stroke(); ctx.restore(); // 画分针 ctx.save(); ctx.rotate(m*Math.PI/30); ctx.lineWidth=4; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-200); ctx.closePath(); ctx.strokeStyle="#060000"; ctx.stroke(); ctx.restore(); // 画秒针 ctx.save(); ctx.rotate(s*Math.PI/30-Math.PI/2); ctx.beginPath(); ctx.moveTo(200,0); ctx.lineTo(-20,-3); ctx.lineTo(-20,-5); ctx.lineTo(-30,-5); ctx.lineTo(-30,5); ctx.lineTo(-20,5); ctx.lineTo(-20,3); ctx.closePath(); ctx.fillStyle="#060000"; ctx.fill(); ctx.restore(); // 画小圆点 ctx.save(); ctx.beginPath(); ctx.arc(0,0,5,0,2*Math.PI,true); ctx.closePath(); ctx.strokeStyle="#060000"; ctx.fillStyle="rgb(216,185,138)"; ctx.fill(); ctx.stroke(); ctx.restore(); } } //--> </script>
【参照的原型】
除了玻璃光未实现，其它都有了。
END
