成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

canvas動(dòng)畫(huà)時(shí)鐘

GHOST_349178 / 2844人閱讀

摘要：最近在學(xué)，然后根據(jù)上的例子做了個(gè)動(dòng)畫(huà)時(shí)鐘為什么要造個(gè)輪子，因?yàn)槌?。。首先，找一張時(shí)鐘的圖片，就是下面這張了。那么我們就用循環(huán)來(lái)畫(huà)出小時(shí)的刻度。這個(gè)就是我們的繪制時(shí)鐘的函數(shù)。到這里，動(dòng)畫(huà)時(shí)鐘就了效果圖如下演示地址地址

最近在學(xué)canvas，然后根據(jù)MDN上的例子做了個(gè)動(dòng)畫(huà)時(shí)鐘（為什么要造個(gè)輪子，因?yàn)槌?。。?/del>

這是MDN上的例子，怎么說(shuō)呢，比較復(fù)古吧。

首先，找一張時(shí)鐘的圖片，就是下面這張了。

——來(lái)自bigger than bigger的dribbble網(wǎng)站，圖片來(lái)源（侵刪）

然后就開(kāi)始用canvas實(shí)現(xiàn)這個(gè)逼格滿(mǎn)滿(mǎn)的時(shí)鐘吧。在html代碼中插入canvas標(biāo)簽

在js文件中創(chuàng)建畫(huà)布（假設(shè)我們使用的都是現(xiàn)代瀏覽器）。

function clock() {
  var ctx = document.getElementById("canvas").getContext("2d");
}

先來(lái)繪制時(shí)鐘表盤(pán)，我們看到這張圖是帶有光線(xiàn)陰影效果的，畫(huà)成一樣難度太高。于是就用顏色的漸變來(lái)讓時(shí)鐘看起來(lái)稍微立體一點(diǎn)。在canvas中用createLinearGradient來(lái)創(chuàng)建一個(gè)新的漸變，并用addColorStop上色，最后把顏色賦給strokeStyle。詳見(jiàn)運(yùn)用樣式與顏色 by MDN

//繪制表盤(pán)底色
ctx.translate(200, 200); //將坐標(biāo)原點(diǎn)移到畫(huà)布中心
ctx.rotate(-Math.PI/2); //將坐標(biāo)軸逆時(shí)針旋轉(zhuǎn)90度，x軸正方向?qū)?zhǔn)12點(diǎn)方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0);
lingrad.addColorStop(0, "#242f37");
lingrad.addColorStop(1, "#48585c");
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();

比較關(guān)鍵的一點(diǎn)是畫(huà)布的坐標(biāo)軸x軸正方向是時(shí)鐘3點(diǎn)鐘方向，為了方便起見(jiàn)，我們把它逆時(shí)針旋轉(zhuǎn)90度讓它指向十二點(diǎn)鐘方向。

繪制刻度要用到旋轉(zhuǎn)rotate（變形 Transformations by MDN），小時(shí)刻度有12個(gè)，相鄰兩個(gè)刻度與圓心連線(xiàn)的角度就是Math.PI/6，這里用的是弧度表示，也就是30度。那么我們就用for循環(huán)來(lái)畫(huà)出小時(shí)的刻度。

for (var i = 0; i < 12; i++) {
  ctx.beginPath();
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

同理，分鐘的刻度也一樣。

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉與小時(shí)刻度重疊的部分
    ctx.beginPath();
    ctx.strokeStyle = "#536b7a";
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  ctx.rotate(Math.PI / 30);
}

表盤(pán)大致畫(huà)好了，刻度也畫(huà)好了，接下來(lái)就是繪制指針并讓它指向正確的時(shí)間，是不是？不就就是畫(huà)一條直線(xiàn)么。關(guān)鍵是指針rotate的角度是多少呢？其實(shí)也是比較簡(jiǎn)單的。先獲取當(dāng)前的時(shí)間，把小時(shí)轉(zhuǎn)換為12小時(shí)制的。

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

那么，時(shí)針的位置就是（相對(duì)于x軸正方向轉(zhuǎn)過(guò)的角度）：

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

同理，分針和秒針的位置：

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800)); //分針
ctx.rotate(sec * (Math.PI /30)); //秒針

最后，最關(guān)鍵的讓指針轉(zhuǎn)動(dòng)起來(lái)，這里要用到的是requestAnimationFrame方法，用來(lái)重繪頁(yè)面，得到連貫逐幀的動(dòng)畫(huà)，實(shí)現(xiàn)最佳的動(dòng)畫(huà)效果。

window.requestAnimationFrame(callback);

這個(gè)callback就是我們的繪制時(shí)鐘的clock()函數(shù)。需要注意的是每次執(zhí)行完requestAnimationFrame后需要清除畫(huà)布，不然出現(xiàn)重疊交錯(cuò)的現(xiàn)象，我們把它放在clock函數(shù)開(kāi)始的地方。

ctx.clearRect(0, 0, canvas.width, canvas.height);

到這里，動(dòng)畫(huà)時(shí)鐘就OK了 效果圖如下：

Codepen演示地址

Github地址

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

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

相關(guān)文章

  • circle_clock 簡(jiǎn)單canvas實(shí)現(xiàn)圓弧時(shí)鐘

    摘要：渣渣成品圖最近對(duì)于圓形有種特別的感情呢因?yàn)閷?xiě)了個(gè)就像到了用來(lái)做時(shí)鐘大概會(huì)比較有趣吧所以就著手寫(xiě)了個(gè)這樣的一個(gè)東西大概代碼上錯(cuò)漏還是蠻多的接下來(lái)分享下關(guān)于如何開(kāi)發(fā)一個(gè)圓形時(shí)鐘條吧使用這次就沒(méi)有采用的方法來(lái)實(shí)現(xiàn)圓環(huán)了因?yàn)槲蚁胍龆鄬忧短椎膱A環(huán)覺(jué) 渣渣成品圖:http://codepen.io/thewindswor... 最近對(duì)于圓形有種特別的感情呢...因?yàn)閷?xiě)了個(gè)cricle_proce...

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

  • circle_clock 簡(jiǎn)單canvas實(shí)現(xiàn)圓弧時(shí)鐘

    摘要：渣渣成品圖最近對(duì)于圓形有種特別的感情呢因?yàn)閷?xiě)了個(gè)就像到了用來(lái)做時(shí)鐘大概會(huì)比較有趣吧所以就著手寫(xiě)了個(gè)這樣的一個(gè)東西大概代碼上錯(cuò)漏還是蠻多的接下來(lái)分享下關(guān)于如何開(kāi)發(fā)一個(gè)圓形時(shí)鐘條吧使用這次就沒(méi)有采用的方法來(lái)實(shí)現(xiàn)圓環(huán)了因?yàn)槲蚁胍龆鄬忧短椎膱A環(huán)覺(jué) 渣渣成品圖:http://codepen.io/thewindswor... 最近對(duì)于圓形有種特別的感情呢...因?yàn)閷?xiě)了個(gè)cricle_proce...

    寵來(lái)也 評(píng)論0 收藏0

  • circle_clock 簡(jiǎn)單canvas實(shí)現(xiàn)圓弧時(shí)鐘

    摘要：渣渣成品圖最近對(duì)于圓形有種特別的感情呢因?yàn)閷?xiě)了個(gè)就像到了用來(lái)做時(shí)鐘大概會(huì)比較有趣吧所以就著手寫(xiě)了個(gè)這樣的一個(gè)東西大概代碼上錯(cuò)漏還是蠻多的接下來(lái)分享下關(guān)于如何開(kāi)發(fā)一個(gè)圓形時(shí)鐘條吧使用這次就沒(méi)有采用的方法來(lái)實(shí)現(xiàn)圓環(huán)了因?yàn)槲蚁胍龆鄬忧短椎膱A環(huán)覺(jué) 渣渣成品圖:http://codepen.io/thewindswor... 最近對(duì)于圓形有種特別的感情呢...因?yàn)閷?xiě)了個(gè)cricle_proce...

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

  • 使用Canvas繪制簡(jiǎn)單的時(shí)鐘控件

    摘要：有了，我們就再也不需要了，直接使用完成繪制。繪制原點(diǎn)開(kāi)始時(shí)鐘開(kāi)始時(shí)鐘我們將當(dāng)前時(shí)間繪制到始終上面即可需要注意的是，在繪制之前需要將之前繪制的東西清除掉。Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動(dòng)畫(huà)等。 沒(méi)有Canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁(yè)面不得不用JavaScript和Flash進(jìn)行交互。有了Canvas，我們就...

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

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

0條評(píng)論

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