国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas畫動(dòng)態(tài)時(shí)鐘

shadajin / 1291人閱讀

摘要：用畫動(dòng)態(tài)時(shí)鐘代碼代碼保存當(dāng)前畫布樣式切換中心點(diǎn)畫外圓畫數(shù)字畫時(shí)刻畫時(shí)針，分針，秒針將分，秒換算成小時(shí)返回上一個(gè)畫布樣式將秒換算成分畫圓心將所有事件封裝在一個(gè)函數(shù)中，為制作成動(dòng)態(tài)時(shí)鐘做準(zhǔn)備清空整個(gè)畫布初始化

用canvas畫動(dòng)態(tài)時(shí)鐘

HTML代碼

</>復(fù)制代碼 
  2.   
  3.     :
  4.     :
  5.     
  6.   
  7.   
  8.     
  9.

css：

</>復(fù)制代碼 
  1. *{margin: 0;padding: 0;}
  2. div{
  3.   text-align: center;
  4. }
  5. div.box{
  6.   margin: 50px auto;
  7.   text-align: center;
  8.   font-size: 30px;
  9.   display: flex;
  10.   align-content: center;
  11.   justify-content: center;
  12. }
  13. span{
  14.   display: inline-block;
  15.   width: 50px;
  16.   height: 50px;
  17.   line-height: 50px;
  18.   border:2px solid #ccc;
  19.   font-size: 20px;
  20.   margin: 0px 20px;
  21. }

js代碼

</>復(fù)制代碼 
  1.   var hourspan =document.getElementById("hour");
  2.   var minutespan =document.getElementById("minute");
  3.   var secondspan =document.getElementById("second");
  4.   var dom = document.getElementById("clock");
  5.   var ctx = dom.getContext("2d");
  6.   var width = ctx.canvas.width;
  7.   var height = ctx.canvas.height;
  8.   var r = width/2;
  9.   
  10.   function drawBackground(){
  11.     ctx.save(); //保存當(dāng)前畫布樣式
  12.     ctx.translate(r,r);//切換中心點(diǎn)
  13. //畫外圓
  14.     ctx.beginPath();
  15.     ctx.lineWidth=10;
  16.     ctx.arc(0,0,r-5,0,2*Math.PI,false);
  17.     ctx.stroke();
  18. //畫數(shù)字
  19.     var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
  20.     ctx.textAlign = "center";
  21.     ctx.textBaseline = "middle";
  22.     hourNumber.forEach(function(item,index){
  23.       var rad = 2*Math.PI/12*index;
  24.       var x = Math.cos(rad)*(r-30);
  25.       var y = Math.sin(rad)*(r-30);
  26.       ctx.fillText(item,x,y);
  27.     })
  28. //畫時(shí)刻
  29.     for(var i=0;i<60;i++){
  30.       var rad = 2*Math.PI/60*i;
  31.       var x = Math.cos(rad)*(r-15);
  32.       var y = Math.sin(rad)*(r-15);
  33.       ctx.beginPath();
  34.       ctx.arc(x,y,2,0,Math.PI*2,false);
  35.       if(i%5 == 0){
  36.         ctx.fillStyle = "#000";
  37.         ctx.fill();
  38.       }else{
  39.         ctx.fillStyle = "#ccc";
  40.         ctx.fill();
  41.       }
  42.     }
  43.   }
  44. //畫時(shí)針，分針，秒針
  45.   function drawHour(hour,minute,second){
  46.     ctx.save();
  47.     ctx.beginPath();
  48.     var rad = 2*Math.PI/12*hour+((2*Math.PI/12)*(minute+second/60)/60);//將分，秒換算成小時(shí)
  49.     ctx.rotate(rad);
  50.     ctx.strokeStyle = "#000";
  51.     ctx.lineWidth = 4;
  52.     ctx.lineCap = "round";
  53.     ctx.moveTo(0,10);
  54.     ctx.lineTo(0,-r/2);
  55.     ctx.stroke();
  56.     ctx.restore();//返回上一個(gè)畫布樣式
  57.   }
  58.   function drawMinute(minute,second){
  59.     ctx.save();
  60.     ctx.beginPath();
  61.     var rad = 2*Math.PI/60*minute+(2*Math.PI/60)*(second/60);//將秒換算成分
  62.     ctx.rotate(rad);
  63.     ctx.strokeStyle = "#000";
  64.     ctx.lineWidth = 6;
  65.     ctx.lineCap = "round";
  66.     ctx.moveTo(0,15);
  67.     ctx.lineTo(0,-(r-25));
  68.     ctx.stroke();
  69.     ctx.restore();
  70.   }
  71.   function drawSecond(second){
  72.     ctx.save();
  73.     ctx.beginPath();
  74.     ctx.strokeStyle = "red";
  75.     var rad = 2*Math.PI/60*second;
  76.     ctx.rotate(rad);
  77.     ctx.lineWidth = 3;
  78.     ctx.lineCap = "round";
  79.     ctx.moveTo(0,20);
  80.     ctx.lineTo(0,-(r-15));
  81.     ctx.stroke();
  82.     ctx.restore();
  83.   }
  84. //畫圓心
  85.   function drawCicle(){
  86.     ctx.save();
  87.     ctx.beginPath();
  88.     ctx.fillStyle ="#fff";
  89.     ctx.arc(0,0,2,0,Math.PI*2,false);
  90.     ctx.fill();
  91.     ctx.restore();
  92.   }
  93.   
  94.   
  95.   //將所有事件封裝在一個(gè)函數(shù)中，為制作成動(dòng)態(tài)時(shí)鐘做準(zhǔn)備
  96.   function timeActive(){
  97.     ctx.clearRect(0,0,width,height);//清空整個(gè)畫布
  98.     var date = new Date();
  99.     var hour = date.getHours();
  100.     var minute = date.getMinutes();
  101.     var second = date.getSeconds();
  102.     hourspan.innerText = hour;
  103.     minutespan.innerText = minute;
  104.     secondspan.innerText = second;
  105.     drawBackground();
  106.     drawHour(hour,minute,second);
  107.     drawMinute(minute,second);
  108.     drawSecond(second);
  109.     drawCicle();
  110.     ctx.restore();
  111.   }
  112.   timeActive();//初始化畫布
  113.   setInterval("timeActive()",1000);

小生初出茅廬，希望各位海涵，看見網(wǎng)上的教學(xué)視頻后，感覺挺有意思的，手敲了一遍。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112163.html

相關(guān)文章

  • canvas畫動(dòng)態(tài)時(shí)鐘

    摘要：用畫動(dòng)態(tài)時(shí)鐘代碼代碼保存當(dāng)前畫布樣式切換中心點(diǎn)畫外圓畫數(shù)字畫時(shí)刻畫時(shí)針，分針，秒針將分，秒換算成小時(shí)返回上一個(gè)畫布樣式將秒換算成分畫圓心將所有事件封裝在一個(gè)函數(shù)中，為制作成動(dòng)態(tài)時(shí)鐘做準(zhǔn)備清空整個(gè)畫布初始化 用canvas畫動(dòng)態(tài)時(shí)鐘 showImg(https://segmentfault.com/img/bVPBM0?w=528&h=423); HTML代碼 : ...

    Miyang 評(píng)論0 收藏0

  • canvas畫動(dòng)態(tài)時(shí)鐘

    摘要：用畫動(dòng)態(tài)時(shí)鐘代碼代碼保存當(dāng)前畫布樣式切換中心點(diǎn)畫外圓畫數(shù)字畫時(shí)刻畫時(shí)針，分針，秒針將分，秒換算成小時(shí)返回上一個(gè)畫布樣式將秒換算成分畫圓心將所有事件封裝在一個(gè)函數(shù)中，為制作成動(dòng)態(tài)時(shí)鐘做準(zhǔn)備清空整個(gè)畫布初始化 用canvas畫動(dòng)態(tài)時(shí)鐘 showImg(https://segmentfault.com/img/bVPBM0?w=528&h=423); HTML代碼 : ...

    BearyChat 評(píng)論0 收藏0

  • 認(rèn)識(shí)canvas（畫扇形 動(dòng)態(tài)畫圓弧（requestAnimationFrame結(jié)合settimeo

    摘要：最近做的兩個(gè)項(xiàng)目都是關(guān)于的，做完整理一下，方便下一次使用，在里寫的小，功能畫扇形動(dòng)態(tài)畫圓弧結(jié)合做的動(dòng)畫畫表盤創(chuàng)建一個(gè)對(duì)象方法開始畫筆設(shè)置填充顏色是順時(shí)針是逆時(shí)針默認(rèn)是逆時(shí)針結(jié)束畫筆開始填充沒有直接創(chuàng)建一個(gè)對(duì)象方法開始畫筆設(shè)置填充顏色是順時(shí)針 最近做的兩個(gè)項(xiàng)目都是關(guān)于canvas的，做完整理一下，方便下一次使用，在vue里寫的小demo，功能：畫扇形 動(dòng)態(tài)畫圓弧（requestAnima...

    xietao3 評(píng)論0 收藏0

  • 認(rèn)識(shí)canvas（畫扇形 動(dòng)態(tài)畫圓弧（requestAnimationFrame結(jié)合settimeo

    摘要：最近做的兩個(gè)項(xiàng)目都是關(guān)于的，做完整理一下，方便下一次使用，在里寫的小，功能畫扇形動(dòng)態(tài)畫圓弧結(jié)合做的動(dòng)畫畫表盤創(chuàng)建一個(gè)對(duì)象方法開始畫筆設(shè)置填充顏色是順時(shí)針是逆時(shí)針默認(rèn)是逆時(shí)針結(jié)束畫筆開始填充沒有直接創(chuàng)建一個(gè)對(duì)象方法開始畫筆設(shè)置填充顏色是順時(shí)針 最近做的兩個(gè)項(xiàng)目都是關(guān)于canvas的，做完整理一下，方便下一次使用，在vue里寫的小demo，功能：畫扇形 動(dòng)態(tài)畫圓弧（requestAnima...

    airborne007 評(píng)論0 收藏0

  • H5--canvas實(shí)現(xiàn)粒子時(shí)鐘

    我們先看看粒子時(shí)鐘的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我們將通過(guò)canvas和js實(shí)現(xiàn)，首先要?jiǎng)?chuàng)建一個(gè)html文件并添加一個(gè)canvas畫布，如下： Document .container{ margin: 0, aut...

    avwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<