关闭

使用HTML5的canvas做一个会动的时钟

1012人阅读 评论(0) 收藏 举报

HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的概念和方式,然后来做一个应用吧。

我们做所有的画之情需要一个画布,html的canvas标签就是帮我们声明了一个画布。

  1. <canvas id="mycanvas">  
  2. </canvas>  
这个默认的画布的大小是300*150,接下来的工作大多就是javaScript来做了。

首先要实例化这个画布

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     $.log(canvas.width);  
  5.     $.log(canvas.height);  
  6.     var context = canvas.getContext("2d");  
  7.     $.log(context.canvas);  
  8.     $.log(context.fillStyle); //要填充的区域的颜色   
  9.     $.log(context.strokeStyle); //要绘制的线条的颜色   
  10.     $.log(context.lineCap); //笔帽样式   
  11.     $.log(context.lineJoin); //两条连续线段的连接样式   
  12.     $.log(context.lineWidth); //线段的宽度   
  13.     $.log(context.miterLimit); //斜联接   
  14.     $.log(context.shadowColor); //阴影的颜色,默认为#000000,   
  15.     $.log(context.shadowOffsetX); //阴影在x方向上的偏移量,默认为0,不受坐标转换的影响。   
  16.     $.log(context.shadowOffsetY); //阴影在y方向上的偏移量,默认为0,不受坐标转换的影响。   
  17.     $.log(context.shadowBlur); //阴影的模糊度,默认为0,负数值将会被忽略   
  18. }  
  19. );  
上面的结果你可以得到一个大致的想法,就是content可以认为是我们将来作画用的画笔(估计有专业人士对强烈抗议,我直接忽略),canvas就是我们的画布。我们现在的画笔是2D的画笔,换句话说就是画平面几何的画笔。

接下来,就是我们利用这个画笔来学习怎么画了

各种线

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     var context = canvas.getContext("2d");  
  5.     context.strokeStyle = "rgb(255, 0, 0)";  
  6.   
  7.     context.beginPath();  
  8.     context.lineCap = "butt"//默认   
  9.     context.lineWidth = 10;  
  10.     context.moveTo(10, 10);  
  11.     context.lineTo(100, 10); //简单的一条线   
  12.     context.stroke(); //该方法真正在画布上绘制该线段   
  13.   
  14.     context.beginPath();  
  15.     context.lineCap = "round"//圆形线头   
  16.     context.moveTo(10, 30);  
  17.     context.lineTo(100, 30);  
  18.     context.stroke(); //该方法真正在画布上绘制该线段   
  19.   
  20.     context.beginPath();  
  21.     context.lineCap = "square"//方形线头   
  22.     context.moveTo(10, 50);  
  23.     context.lineTo(100, 50);  
  24.     context.stroke(); //该方法真正在画布上绘制该线段   
  25. }  
  26. );  
各种阴影
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     var context = canvas.getContext("2d");  
  5.     context.strokeStyle = "rgb(255, 0, 0)";  
  6.     context.lineWidth = 10;  
  7.     context.shadowColor = "#0000FF";  
  8.   
  9.     context.beginPath();  
  10.     context.lineCap = "round";  
  11.     context.moveTo(10, 10);  
  12.     context.lineTo(100, 10);  
  13.     context.shadowOffsetX = 10;  
  14.     context.shadowBlur = 10;  
  15.     context.stroke();  
  16.   
  17.     context.beginPath();  
  18.     context.lineCap = "round";  
  19.     context.moveTo(10, 30);  
  20.     context.lineTo(100, 30);  
  21.     context.shadowOffsetY = 10;  
  22.     context.shadowBlur = 10;  
  23.     context.stroke();  
  24.   
  25. }  
  26. );  
各种线∠连接
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     var context = canvas.getContext("2d");  
  5.     context.strokeStyle = "rgb(255, 0, 0)";  
  6.     context.lineWidth = 10;  
  7.     context.shadowColor = "#0000FF";  
  8.   
  9.     context.beginPath();  
  10.     context.lineJoin = "miter"//两条线段的外边缘一直扩展到它们相交   
  11.     context.moveTo(10, 70);  
  12.     context.lineTo(50, 10);  
  13.     context.lineTo(80, 70);  
  14.     context.stroke();  
  15.   
  16.     context.lineJoin = "bevel"//以一个斜边进行连接   
  17.     context.moveTo(100, 70);  
  18.     context.lineTo(140, 10);  
  19.     context.lineTo(180, 70);  
  20.     context.stroke();  
  21.   
  22.     context.lineJoin = "round"//:以一个圆弧边进行连接   
  23.     context.beginPath();  
  24.     context.moveTo(200, 70);  
  25.     context.lineTo(240, 10);  
  26.     context.lineTo(280, 70);  
  27.     context.stroke();  
  28.     context.closePath(); //关闭path   
  29.   
  30. }  
  31. );  



mitre的限定
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     var context = canvas.getContext("2d");  
  5.     context.strokeStyle = "rgb(255, 0, 0)";  
  6.     context.lineWidth = 10;  
  7.     context.shadowColor = "#0000FF";  
  8.   
  9.   
  10.     context.beginPath();  
  11.     context.miterLimit = 1; //miterLimit 属性为斜面的长度设置一个上限。   
  12.     //只对线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候有效   
  13.     context.lineJoin = "miter"//两条线段的外边缘一直扩展到它们相交   
  14.     context.moveTo(10, 70);  
  15.     context.lineTo(50, 10);  
  16.     context.lineTo(80, 70);  
  17.     context.stroke();  
  18.   
  19. }  
  20. );  

各种几何图形

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500; //改变默认高度   
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.strokeStyle = "rgb(255, 0, 0)";  
  8.     context.fillStyle = "#AABBCC";  
  9.     context.lineWidth = 2;  
  10.     context.shadowColor = "#0000FF";  
  11.   
  12.     //矩形   
  13.     context.beginPath();  
  14.     context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height   
  15.     context.strokeRect(70, 10, 50, 50)//空心矩形:x,y,width,height   
  16.   
  17.     //context.move(10,100);   
  18.   
  19.     //圆弧:x, y, radius, startAngle, endAngle, anticlockwise   
  20.     context.beginPath();  
  21.     context.arc(35, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  22.     context.stroke();  
  23.     //context.closePath();   
  24.   
  25.     context.beginPath();  
  26.     context.arc(85, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, false);  
  27.     context.stroke();  
  28.     //context.closePath();   
  29.   
  30.     context.beginPath();  
  31.     context.arc(135, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, true);  
  32.     context.stroke();  
  33.     //context.closePath();   
  34.   
  35.     context.beginPath();  
  36.     context.arc(185, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 360, true);  
  37.     context.stroke();  
  38.     //context.closePath();   
  39.   
  40.     context.beginPath();  
  41.     context.arc(235, 110, 25, (Math.PI / 180) * 90, (Math.PI / 180) * 0, false);  
  42.     context.fillStyle = "blue";  
  43.     context.fill();  
  44.     //context.stroke();   
  45.     //context.closePath();   
  46.   
  47.     context.beginPath();  
  48.     context.arc(285, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);  
  49.     context.closePath();  
  50.     context.stroke();  
  51.   
  52.     context.beginPath();  
  53.     context.arc(335, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);  
  54.     context.closePath();  
  55.     context.fillStyle = "blue";  
  56.     context.fill();  
  57.     context.stroke();  
  58.   
  59.     //曲线   
  60.   
  61.   
  62.     context.beginPath();  
  63.     context.moveTo(10, 160); //二次贝塞尔曲线的起始点   
  64.     //controlX, controlY, endX, endY   
  65.     context.quadraticCurveTo(70, 280, 235, 140);  
  66.     context.stroke();  
  67.     context.closePath();  
  68.   
  69.     context.beginPath();  
  70.     context.moveTo(10, 300); //三次贝塞尔曲线的起始点   
  71.     //controlX1, controlY1, controlX2, controlY2, endX, endY   
  72.     context.bezierCurveTo(70, 280, 50, 400, 235, 190);  
  73.     context.stroke();  
  74.     context.closePath();  
  75.   
  76.   
  77. }  
  78. );  
各种变换

记得CSS3中的transform不?canvas肯定也有啊

平移

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500; //改变默认高度   
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.strokeStyle = "rgb(255, 0, 0)";  
  8.     context.fillStyle = "#AABBCC";  
  9.     context.lineWidth = 2;  
  10.     context.shadowColor = "#0000FF";  
  11.     context.moveTo(10, 10);  
  12.     //context.beginPath();   
  13.     //context.beginPath();   
  14.     context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height   
  15.     //context.stroke();   
  16.     $(canvas).on(  
  17.     "click",  
  18.     { "context": context },  
  19.     function(e) {  
  20.         $.log(e.data.context);  
  21.         var ctx = e.data.context;  
  22.         ctx.translate(10, 10); //再最后的路径点上偏移10*10的位置   
  23.         context.fillRect(10, 10, 50, 50);  
  24.         context.stroke();  
  25.     }  
  26.     );  
  27. }  
  28. );  
缩放
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500; //改变默认高度   
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.strokeStyle = "rgb(255, 0, 0)";  
  8.     context.fillStyle = "#AABBCC";  
  9.     context.lineWidth = 2;  
  10.     context.shadowColor = "#0000FF";  
  11.     context.moveTo(10, 10);  
  12.     //context.beginPath();   
  13.     //context.beginPath();   
  14.     context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height   
  15.     //context.stroke();   
  16.     $(canvas).on(  
  17.     "click",  
  18.     { "context": context },  
  19.     function(e) {  
  20.         $.log(e.data.context);  
  21.         var ctx = e.data.context;  
  22.         ctx.scale(1.1, 1.1); //在最后的大小基础上缩放倍数 必须是正数   
  23.         context.fillRect(10, 10, 50, 50);  
  24.         context.stroke();  
  25.     }  
  26.     );  
  27. }  
  28. );  

旋转

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500; //改变默认高度   
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.strokeStyle = "rgb(255, 0, 0)";  
  8.     context.fillStyle = "#AABBCC";  
  9.     context.lineWidth = 2;  
  10.     context.shadowColor = "#0000FF";  
  11.     context.moveTo(10, 10);  
  12.     //context.beginPath();   
  13.     //context.beginPath();   
  14.     context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height   
  15.     //context.stroke();   
  16.     $(canvas).on(  
  17.     "click",  
  18.     { "context": context },  
  19.     function(e) {  
  20.         $.log(e.data.context);  
  21.         var ctx = e.data.context;  
  22.         ctx.rotate((Math.PI / 180) * 10); //旋转的角度,旋转的中心是canvas坐标原点   
  23.         context.fillRect(10, 10, 50, 50);  
  24.         context.stroke();  
  25.     }  
  26.     );  
  27. }  
  28. );  
transform,transform的参数比较多,也比较难理解,简单的说transform是最自由的变形方式,下面给出些参考
  1. //以下两段代码结果一致   
  2. context.transform(1, 0, 0, 1, 10, 10)  
  3. context.translate(10, 10);  
  4.   
  5. //以下两段代码结果一致   
  6. context.transform(10, 0, 0, 10, 0, 0);  
  7. context.scale(10, 10);  
  8.   
  9. //以下三段代码结果一致   
  10. context.transform(Math.cos((Math.PI / 180) * 10), Math.sin((Math.PI / 180) * 10), -Math.sin((Math.PI / 180) * 10), Math.cos((Math.PI / 180)) * 10, 0, 0);  
  11. context.transform(-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.sin((Math.PI/180)*10), 0,0);  
  12. context.rotate(10);  


组合
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 100;  
  5.     canvas.width = 100;  
  6.     var context = canvas.getContext("2d");  
  7.     context.fillStyle = "#AABBCC";  
  8.     context.fillRect(10, 10, 50, 50);  
  9.     //默认 新图形会覆盖在原有内容之上   
  10.     context.globalCompositeOperation = "source-over";  
  11.     context.fillStyle = "blue";  
  12.     context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  13.     context.fill();  
  14.     $("span").html(context.globalCompositeOperation);  
  15.     $(canvas).toggle(  
  16.     function() {  
  17.         canvas.width = 100;  
  18.         // 原有内容之下绘制新图形   
  19.         context.clearRect(0, 0, 500, 500);  
  20.         context.beginPath();  
  21.         context = canvas.getContext("2d");  
  22.         context.fillStyle = "#AABBCC";  
  23.         context.fillRect(10, 10, 50, 50);  
  24.         context.globalCompositeOperation = "destination-over";  
  25.         context.fillStyle = "blue";  
  26.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  27.         context.fill();  
  28.         $("span").html(context.globalCompositeOperation);  
  29.     },  
  30.     function() {  
  31.         canvas.width = 100;  
  32.         //新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的   
  33.         context.clearRect(0, 0, 500, 500);  
  34.         context.beginPath();  
  35.         context.fillStyle = "#AABBCC";  
  36.         context.fillRect(10, 10, 50, 50);  
  37.         context.globalCompositeOperation = "source-in";  
  38.         context.fillStyle = "blue";  
  39.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  40.         context.fill();  
  41.         $("span").html(context.globalCompositeOperation);  
  42.     },  
  43.     function() {  
  44.         canvas.width = 100;  
  45.         //原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的destination-in   
  46.         context.clearRect(0, 0, 500, 500);  
  47.         context.beginPath();  
  48.         context = canvas.getContext("2d");  
  49.         context.fillStyle = "#AABBCC";  
  50.         context.fillRect(10, 10, 50, 50);  
  51.         context.globalCompositeOperation = "destination-in";  
  52.         context.fillStyle = "blue";  
  53.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  54.         context.fill();  
  55.         $("span").html(context.globalCompositeOperation);  
  56.   
  57.     },  
  58.     function() {  
  59.         canvas.width = 100;  
  60.         //只有新图形中与原有内容不重叠的部分会被绘制出来source-out   
  61.         context.clearRect(0, 0, 500, 500);  
  62.         context.beginPath();  
  63.         context = canvas.getContext("2d");  
  64.         context.fillStyle = "#AABBCC";  
  65.         context.fillRect(10, 10, 50, 50);  
  66.         context.globalCompositeOperation = "source-out";  
  67.         context.fillStyle = "blue";  
  68.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  69.         context.fill();  
  70.         $("span").html(context.globalCompositeOperation);  
  71.     },  
  72.     function() {  
  73.         canvas.width = 100;  
  74.         //原有内容中与新图形不重叠的部分会被保留   
  75.         context.clearRect(0, 0, 500, 500);  
  76.         context.beginPath();  
  77.         context = canvas.getContext("2d");  
  78.         context.fillStyle = "#AABBCC";  
  79.         context.fillRect(10, 10, 50, 50);  
  80.         context.globalCompositeOperation = "destination-out";  
  81.         context.fillStyle = "blue";  
  82.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  83.         context.fill();  
  84.         $("span").html(context.globalCompositeOperation);  
  85.     },  
  86.     function() {  
  87.         canvas.width = 100;  
  88.         //新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上   
  89.         context.clearRect(0, 0, 500, 500);  
  90.         context.beginPath();  
  91.         context = canvas.getContext("2d");  
  92.         context.fillStyle = "#AABBCC";  
  93.         context.fillRect(10, 10, 50, 50);  
  94.         context.globalCompositeOperation = "source-atop";  
  95.         context.fillStyle = "blue";  
  96.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  97.         context.fill();  
  98.         $("span").html(context.globalCompositeOperation);  
  99.     },  
  100.     function() {  
  101.         canvas.width = 100;  
  102.         //原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形   
  103.         context.clearRect(0, 0, 500, 500);  
  104.         context.beginPath();  
  105.         context = canvas.getContext("2d");  
  106.         context.fillStyle = "#AABBCC";  
  107.         context.fillRect(10, 10, 50, 50);  
  108.         context.globalCompositeOperation = "destination-atop";  
  109.         context.fillStyle = "blue";  
  110.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  111.         context.fill();  
  112.         $("span").html(context.globalCompositeOperation);  
  113.     },  
  114.     function() {  
  115.         canvas.width = 100;  
  116.         //两图形中重叠部分作加色处理   
  117.         context.clearRect(0, 0, 500, 500);  
  118.         context.beginPath();  
  119.         context = canvas.getContext("2d");  
  120.         context.fillStyle = "#AABBCC";  
  121.         context.fillRect(10, 10, 50, 50);  
  122.         context.globalCompositeOperation = "lighter";  
  123.         context.fillStyle = "blue";  
  124.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  125.         context.fill();  
  126.         $("span").html(context.globalCompositeOperation);  
  127.     },  
  128.     function() {  
  129.         canvas.width = 100;  
  130.         //两图形中重叠的部分作减色处理darker   
  131.         context.clearRect(0, 0, 500, 500);  
  132.         context.beginPath();  
  133.         context = canvas.getContext("2d");  
  134.         context.fillStyle = "#AABBCC";  
  135.         context.fillRect(10, 10, 50, 50);  
  136.         context.globalCompositeOperation = "darker";  
  137.         context.fillStyle = "blue";  
  138.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  139.         context.fill();  
  140.         $("span").html(context.globalCompositeOperation);  
  141.     },  
  142.     function() {  
  143.         canvas.width = 100;  
  144.         //重叠的部分会变成透明   
  145.         context.clearRect(0, 0, 500, 500);  
  146.         context.beginPath();  
  147.         context = canvas.getContext("2d");  
  148.         context.fillStyle = "#AABBCC";  
  149.         context.fillRect(10, 10, 50, 50);  
  150.         context.globalCompositeOperation = "xor";  
  151.         context.fillStyle = "blue";  
  152.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  153.         context.fill();  
  154.         $("span").html(context.globalCompositeOperation);  
  155.     },  
  156.     function() {  
  157.         canvas.width = 100;  
  158.         //只有新图形会被保留,其它都被清除掉   
  159.         context.clearRect(0, 0, 500, 500);  
  160.         context.beginPath();  
  161.         context = canvas.getContext("2d");  
  162.         context.fillStyle = "#AABBCC";  
  163.         context.fillRect(10, 10, 50, 50);  
  164.         context.globalCompositeOperation = "copy";  
  165.         context.fillStyle = "blue";  
  166.         context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  167.         context.fill();  
  168.         $("span").html(context.globalCompositeOperation);  
  169.         alert("演示结束");  
  170.     }  
  171.     );  
  172. }  
  173. );  
字体(看文档说canvas的字体支持CSS样式的描写,但是,我不知道怎么样让canvas的font支持CSS3的在线字体)
  1. <script src=../../"js/jquery-1.7.1.min.js" type="text/javascript"></script>  
  2.   
  3. <link rel="stylesheet" type="text/css" href=../../"http://fonts.googleapis.com/css?family=Tangerine">  
  4.   
  5. <script type="text/javascript">  
  6.     $.log = function(msg) {  
  7.         console.log(msg);  
  8.     }  
  9.   
  10.     $(  
  11.     function() {  
  12.         var canvas = document.getElementById("mycanvas");  
  13.         canvas.height = 200;  
  14.         canvas.width = 200;  
  15.         var context = canvas.getContext("2d");  
  16.         context.font = "20px 新宋体";  
  17.         context.fillText("这是实心新宋体", 10, 30);  
  18.         context.strokeText("这是空心新宋体", 10, 60);  
  19.         context.font = "20px Tangerine serif";  
  20.         context.fillText("Hello HTML5", 10, 100);  
  21.         context.strokeText("Hello HTML5", 10, 150);  
  22.   
  23.     }  
  24.     );  
  25. </script>  
我们尝试写一圈旋转的文字,吧上面的知识点合起来看看效果
  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500;  
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.translate(150, 150);  
  8.     context.scale(0.7, 0.7);  
  9.     context.font = "12px Tahoma";  
  10.     for (var i = 0; i < 12; i++) {  
  11.         context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 150, 10);  
  12.         context.rotate((Math.PI / 6));  
  13.     }  
  14. }  
  15. );  


在具体绘制的时候,定位总是让我这样没有空间感的人感觉痛苦,所以我现在canvas上画上很多格子,帮助我进行布局

  1. $(  
  2. function() {  
  3.     var canvas = document.getElementById("mycanvas");  
  4.     canvas.height = 500;  
  5.     canvas.width = 500;  
  6.     var context = canvas.getContext("2d");  
  7.     context.lineWidth = 1;  
  8.     context.strokeStyle = "rgb(211,211,211)";  
  9.   
  10.     for (var i = 0; i < 50; i++) {  
  11.         $.log(i);  
  12.         context.moveTo(i * 10, 0);  
  13.         context.lineTo(i * 10, 500);  
  14.         context.stroke();  
  15.     }  
  16.   
  17.     for (var i = 0; i < 50; i++) {  
  18.         $.log(i);  
  19.         context.moveTo(0, i * 10);  
  20.         context.lineTo(500, i * 10);  
  21.         context.stroke();  
  22.     }  
  23. }  
  24. );  
前面的准备工作都完成了,现在我们来综合下,完成一个具有时分秒的会动的钟
  1. $(  
  2. function() {  
  3.     clock();  
  4.     setInterval(clock, 1000);  
  5. }  
  6. );  
  7.   
  8. function clock() {  
  9.     var canvas = document.getElementById("mycanvas");  
  10.     canvas.height = 500;  
  11.     canvas.width = 500;  
  12.     var context = canvas.getContext("2d");  
  13.   
  14.     context.beginPath();  
  15.     context.lineWidth = 1;  
  16.     context.strokeStyle = "rgb(211,211,211)";  
  17.   
  18.     for (var i = 0; i < 50; i++) {  
  19.         $.log(i);  
  20.         context.moveTo(i * 10, 0);  
  21.         context.lineTo(i * 10, 500);  
  22.         context.stroke();  
  23.     }  
  24.   
  25.     for (var i = 0; i < 50; i++) {  
  26.         $.log(i);  
  27.         context.moveTo(0, i * 10);  
  28.         context.lineTo(500, i * 10);  
  29.         context.stroke();  
  30.     }  
  31.   
  32.     context.beginPath();  
  33.     context.strokeStyle = "rgb(255,0,0)";  
  34.     context.arc(250, 250, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
  35.     context.stroke();  
  36.   
  37.     context.save(); //存储当前画布坐标系状态   
  38.     context.beginPath();  
  39.     context.font = "14px Tahoma"  
  40.     context.translate(255, 255); //将坐标系坐标原点移至图中间   
  41.     context.strokeStyle = "#FFFFFF";  
  42.     for (var i = 0; i < 12; i++) {  
  43.         context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 180, 0);  
  44.         context.rotate((Math.PI / 6));  
  45.     }  
  46.     context.restore();  
  47.   
  48.     context.save();  
  49.     context.beginPath();  
  50.     context.lineWidth = 5;  
  51.     context.translate(255, 255); //将坐标系坐标原点移至图中间   
  52.     for (i = 0; i < 60; i++) {  
  53.         if (i % 5 != 0) {  
  54.             context.beginPath();  
  55.             context.moveTo(180, 0);  
  56.             context.lineTo(190, 0);  
  57.             context.stroke();  
  58.         }  
  59.         context.rotate(Math.PI / 30);  
  60.     }  
  61.     context.restore();  
  62.   
  63.     var now = new Date();  
  64.     var sec = now.getSeconds();  
  65.     var min = now.getMinutes();  
  66.     var hr = now.getHours() >= 12 ? now.getHours() - 12 : now.getHours();  
  67.     context.save();  
  68.     context.translate(255, 255); //将坐标系坐标原点移至图中间   
  69.     // - (Math.PI / 6) * 3 是因为0度在3点这里   
  70.     context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec - (Math.PI / 6) * 3);  
  71.     context.lineWidth = 14;  
  72.     context.beginPath();  
  73.     context.moveTo(-20, 0);  
  74.     context.lineTo(150, 0);  
  75.     context.stroke();  
  76.     context.restore();  
  77.   
  78.   
  79.     context.save();  
  80.     context.translate(255, 255); //将坐标系坐标原点移至图中间   
  81.     context.rotate(min * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)  
  82.     context.lineWidth = 10;  
  83.     context.beginPath();  
  84.     context.moveTo(-28, 0);  
  85.     context.lineTo(160, 0);  
  86.     context.stroke();  
  87.     context.restore();  
  88.   
  89.     context.save();  
  90.     context.translate(255, 255); //将坐标系坐标原点移至图中间   
  91.     context.lineWidth = 1;  
  92.     context.rotate(sec * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)  
  93.     context.lineWidth = 10;  
  94.     context.beginPath();  
  95.     context.moveTo(-28, 0);  
  96.     context.lineTo(160, 0);  
  97.     context.stroke();  
  98.     context.restore();  
  99. }  

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:268763次
    • 积分:4810
    • 等级:
    • 排名:第5928名
    • 原创:201篇
    • 转载:19篇
    • 译文:2篇
    • 评论:33条
    文章分类
    最新评论