zoukankan      html  css  js  c++  java

  • canvas做的时钟，学习下

    canvas标签只是图形容器，您必须使用脚本来绘制图形。

            getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。

            getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

            fillRect(l,t,w,h)：默认颜色是黑色

            strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框

            setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

            beginPath()：定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。

            closePath()：结束绘制路径（将起点与终点进行连接）

            arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制一条弧线，到（x2,y2）为止，并且以给定的半径radius穿过(x1,y1)。

            lineTo(x,y):从一点开始绘制一条直线，到(x,y)为止。

             moveTo(x,y)：将绘图游标移动到(x,y)，不画线。

             font：表示文本样式、大小及字体，用css中指定字体的格式来指定，例如"bold 10px Arial"。

            textAlign：表示文本对齐方法。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end"，不要使用“left”和“right”，因为前两者的意思更稳妥，能同时适合从左到右和从右到左

    显示（阅读）的语言。

            textBaseline：表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、"ideographic"和“bottom”。

            fillText()，strokeText()：这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度，文本最大像素宽度（尚未得到所有浏览器的支持，最早支持他的是firefox4）


            绘制圆形

            arc（ x,y,半径,起始弧度，结束弧度,旋转方向,fasle）

            x,y：起始位置

            弧度与角度的关系：弧度=角度*Math.PI/180            2*Math.PI代表360度的弧度

            旋转方向：顺时针（默认：false，逆时针：true）

            注意点：

            1.注意canvas画图的层次关系

            2.注意合理利用beginPath()和closePath()

            3.由于圆心每个角度的坐标点无法准确确定，因此用arc()化弧度，从而的得到刻度浮点，然后通过closePath闭合形成路径，填充，然后在填充一个较小的圆填充白色，从而产生刻度。
            
            4.通过fillText(),strokeText()来打上时间点。


    1. <!DOCTYPE HTML>
    2. <html lang="en-US">
    3. <head>
    4.         <meta charset="UTF-8">
    5.         <title>html5 canvas打造时钟</title>
    6.         <style type="text/css">
    7.                 body,h3{margin:0;text-align:center}
    8.                 h3{
    9.                         padding:0;
    10.                         text-align:center;
    11.                         background:#333;
    12.                         font-size:1.5em;
    13.                         color:#fff;
    14.                         line-height:2em;
    15.                         text-shadow:0 0 10px rgba(0, 39, 245, 0.65);
    16.                 }
    17.                 #canvas{
    18.                         margin:20px 0;
    19.                         border:1px solid #bbb;
    20.                         background:#D6D5D5;
    21.                 }
    22.                 p{text-align:center;color:#bbb}
    23.         </style>
    24. </head>
    25. <body>
    26.         <h3>html5 canvas打造时钟</h3>
    27.         <canvas id="canvas" width="600" height="600">
    28.                 您的浏览器不支持canvas,请使用高级浏览器。
    29.                 http://blog.segmentfault.com/trigkit4/1190000000652925
    30.         </canvas>
    31.         <p>似水流年，且行且珍惜！</p>
    32.         <script type="text/javascript">
    33.                 var canvas=document.getElementById('canvas');
    34.                 if(canvas.getContext){
    35.                         //对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
    36.                         var context=canvas.getContext('2d');
    37.                         drawClock(context);
    38.                         setInterval(function(){drawClock(context)},1000);
    39.                 }
    40.                 function  drawClock(canvas){
    41.                         var x=300,   //钟表圆心坐标
    42.                             y=300,
    43.                             r=200;         //钟表半径
    44.                         //清除画布
    45.                         canvas.clearRect(0,0,canvas.width,canvas.height);
    46.                          
    47.                          
    48.                         //修饰部分  即，建立一个白色的画布
    49.                         canvas.beginPath();
    50.                         //moveTo()将绘图游标移到(x,y)不画线
    51.                         canvas.moveTo(x,y);
    52.                         //arc(x,y,半径,起始弧度,结束弧度，旋转方向true|false)
    53.                         //arc 绘制 圆形 顺时针为false
    54.                         canvas.arc(x,y,r,0,360,false);
    55.                         //closePath()结束绘图
    56.                         canvas.closePath();
    58.                         canvas.fillStyle='#fff';
    59.                         canvas.fill();
    60.                          
    61.                         //镶嵌时钟数字
    62.                         var date=new Date(),//创建日期对象
    63.                                 hours=date.getHours(),
    64.                                 minutes=date.getMinutes(),
    65.                                 seconds=date.getSeconds();
    66.                          
    68.                         var hoursValue=(-90 + hours*30+minutes/2)*Math.PI/180,
    69.                                 minutesValue=(-90+minutes*6)*Math.PI/180,
    70.                                 secondsValue=(-90+seconds*6)*Math.PI/180;
    71.                                  
    73.                                 canvas.beginPath();
    74.                                 for(var i=0;i<60;i++){
    75.                                         canvas.moveTo(x,y);
    76.                                         canvas.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
    77.                                 }
    78.                                          
    79.                  
    80.                                 canvas.closePath();
    81.                                 canvas.stroke();
    82.                                  
    83.                                 canvas.beginPath();
    84.                                 canvas.moveTo(x,y);
    85.                                 canvas.fillStyle='#fff';
    86.                                  
    87.                                 canvas.arc(x,y,r*19/20,0,2*Math.PI,false);
    88.                                  
    89.                                 canvas.closePath();
    90.                 canvas.fill();
    91.                                  
    92.                                 canvas.beginPath();
    93.                                 canvas.lineWidth=3;
    94.                          
    95.                                 for(var i=0;i<12;i++){
    96.                                         canvas.moveTo(x,y);
    97.                                          
    98.                                         canvas.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
    99.                                 }
    100.                                 canvas.closePath();
    101.                 canvas.stroke();
    102.                                  
    103.                                 canvas.beginPath();
    104.                                 canvas.arc(x,y,r*18/20,0,2*Math.PI,false);
    105.                                 canvas.closePath();
    106.                                 canvas.fillStyle='#fff';
    107.                                 canvas.fill();
    108.                                 canvas.font="bold 16px Arial";
    109.                                 canvas.textAlign='center';
    110.                                 canvas.textBaseLine='middle';
    111.                                 canvas.fillStyle='red';
    112.                                 canvas.fillText('12',x,y-165,200);                               
    113.                                 canvas.fillText('6',x,y+165,200);                               
    114.                                 canvas.fillText('3',x+165,y+5,200);                               
    115.                                 canvas.fillText('9',x-165,y+5,200);                               
    116.                                 dyear=date.getFullYear(),
    117.                                 dmonth=date.getMonth()+1,
    118.                                 dDate=date.getDate(),
    119.                                 weeks=date.getDay();
    120.                                 canvas.fillText(dyear+'-'+dmonth+'-'+dDate+' '+dateWeek(weeks)+' '+hours+':'+toDouble(minutes)+':'+toDouble(seconds),x,y+60,200);       
    121.                                  
    122.                          
    123.                                 canvas.lineWidth=5;
    124.                                 canvas.beginPath();
    125.                                 canvas.moveTo(x,y);
    126.                                 canvas.arc(x,y,r*10/20,hoursValue,hoursValue,false);
    127.                                 canvas.closePath(); 
    128.                                 canvas.stroke();
    129.                                  
    131.                                 canvas.lineWidth=3;
    132.                                 canvas.beginPath();
    133.                                 canvas.moveTo(x,y);
    134.                                 canvas.arc(x,y,r*14/20,minutesValue,minutesValue,false);
    135.                                 canvas.closePath();
    136.                                 canvas.stroke();
    137.                                  
    139.                                 canvas.lineWidth=1;
    140.                                 canvas.beginPath();
    141.                                 canvas.moveTo(x,y);
    142.                                 canvas.arc(x,y,r*16/20,secondsValue,secondsValue,false); 
    143.                                 canvas.closePath(); 
    144.                                 canvas.stroke();       
    145.                 }
    146.                  
    147.                 function toDouble(num){
    148.                         num>=10 ? num=''+num : num='0'+num ;
    149.                                         return num;
    150.                 }
    151.                  
    152.                 function dateWeek(data){
    153.                         switch(data){
    154.                                 case 1:
    155.                                 return '星期一';
    156.                                 break;       
    157.                                 case 2:
    158.                                 return '星期二';
    159.                                 break;       
    160.                                 case 3:
    161.                                 return '星期三';
    162.                                 break;
    163.                                 case 4:
    164.                                 return '星期四';
    165.                                 break;
    166.                                 case 5:
    167.                                 return '星期五';
    168.                                 break;
    169.                                 case 6:
    170.                                 return '星期六';
    171.                                 break;
    172.                                 case 7:
    173.                                 return '星期日';
    174.                                 break;
    175.                         }
    176.                 }
    177.         </script>
    178. </body>
    179. </html>
    180. 转自：http://www.w3cfuns.com/blog-5452328-5404265.html
  • 相关阅读:
    《代码整洁之道》阅读笔记（三）
    pyqt5知识
    软件开发的生命周期
    软件过程与管理CMMI
    pyQt5练习（三）
    pyQt5练习（二）
    《代码整洁之道》阅读笔记（二）
    pyQt5练习（一）
    Android Studio错误：Connect to 127.0.0.1:1080 [/127.0.0.1] failed: Connection refused: connect
    AndroidStudio：Minimum supported Gradle version is XXX Current version is XXX
  • 原文地址：https://www.cnblogs.com/liuwenbohhh/p/4336008.html
Copyright © 2011-2022 走看看