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

資訊專欄INFORMATION COLUMN

射雞獅說圓形的進(jìn)度條不是我要的效果

defcon / 534人閱讀

摘要：一個(gè)沒什么特別的日子，你接到了一個(gè)沒什么特別的設(shè)計(jì)圖，準(zhǔn)備寫個(gè)沒什么特別的活動頁，然后，看到了一個(gè)效果唔，射雞獅啊，你這個(gè)圓是不是沒畫好啊，缺了個(gè)角。唔，那個(gè)是不是可以畫畫作為一個(gè)熟練操作和的前端工程師，那就去看看有沒有提供什么讓我們的吧。

一個(gè)沒什么特別的日子，你接到了一個(gè)沒什么特別的設(shè)計(jì)圖，準(zhǔn)備寫個(gè)沒什么特別的活動頁，然后，看到了一個(gè)效果：

“唔，射雞獅啊，你這個(gè)圓是不是沒畫好啊，缺了個(gè)角。”
“這是設(shè)計(jì)，你懂不懂？你照著設(shè)計(jì)稿做就完事了，別嗶嗶。”
“擦，缺個(gè)角的圓讓我怎么做！？你聽我說，CSS只能畫圓，而且你這個(gè)環(huán)的兩端還是圓的……”
“有沒有搞錯(cuò)，這點(diǎn)小圖都做不出來，要不換個(gè)前端來跟我對接吧?！?br>作為一個(gè)有尊嚴(yán)的前端工程師，那肯定要證明自己！想想有沒有什么辦法吧。唔，那個(gè)Canvas是不是可以畫畫？
作為一個(gè)熟練操作ctrl + c和ctrl + v的前端工程師，那就去看看Canvas有沒有提供什么API讓我們ctrl + c的吧。

看看Canvas有沒有提供我們想要的東西

官方文檔那些文縐縐的東西就不帶大家看了，這里分享給大家一個(gè)不錯(cuò)的Canvas教程。由于我們的目的是證明自己，趕緊翻了翻這個(gè)教程的目錄，立馬發(fā)現(xiàn)了一個(gè)標(biāo)題《繪制標(biāo)準(zhǔn)圓弧》，這是不是我們想要的東西呢？
拋開那些什么復(fù)雜的圓弧什么曲線，會發(fā)現(xiàn)一個(gè)API:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中startAngle以及endAngle是起始與結(jié)束的位置，它們的單位是弧度，那我們只要利用好這兩位置，就能畫出一個(gè)不閉合的圓了！直觀點(diǎn)的圖：

趕緊試試畫一個(gè)不閉合的圓

codepen看看
GET！這就是我們想要的樣子！這只是成功的第一步，看看跟效果圖的差別，我們還差一個(gè)外圈框住這個(gè)綠色的圈。

在原來的基礎(chǔ)上再畫一個(gè)外圈框住

codepen看看
這簡直就是高保真還原設(shè)計(jì)圖嘛！剩下的事情就簡單啦，只需要讓這個(gè)綠色的圈能動起來就完事了！

動起來吧

這個(gè)動畫思路還是比較明確的，無非就是一幀幀地讓內(nèi)圈從一個(gè)位置轉(zhuǎn)到另一個(gè)位置直至到達(dá)結(jié)束的位置：
codepen看看
到此為止，你就證明了自己，找回前端工程師的尊嚴(yán)！走，打射雞獅去！

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

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

相關(guān)文章

  • 射雞獅說圓形的進(jìn)度條不是我要的效果

    摘要：一個(gè)沒什么特別的日子，你接到了一個(gè)沒什么特別的設(shè)計(jì)圖，準(zhǔn)備寫個(gè)沒什么特別的活動頁，然后，看到了一個(gè)效果唔，射雞獅啊，你這個(gè)圓是不是沒畫好啊，缺了個(gè)角。唔，那個(gè)是不是可以畫畫作為一個(gè)熟練操作和的前端工程師，那就去看看有沒有提供什么讓我們的吧。 一個(gè)沒什么特別的日子，你接到了一個(gè)沒什么特別的設(shè)計(jì)圖，準(zhǔn)備寫個(gè)沒什么特別的活動頁，然后，看到了一個(gè)效果：showImg(https://segme...

    gyl_coder 評論0 收藏0

  • css3實(shí)現(xiàn)圓形進(jìn)度條

    摘要：在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個(gè)長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個(gè)長方形的里面分別有一個(gè)半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大??； 2、在小程序...

    leanote 評論0 收藏0

  • css3實(shí)現(xiàn)圓形進(jìn)度條

    摘要：在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個(gè)長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個(gè)長方形的里面分別有一個(gè)半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計(jì)算進(jìn)度條的大?。? 2、在小程序...

    enali 評論0 收藏0

  • canvas繪制圓形動畫圓角進(jìn)度條

    摘要：如果不想看步驟的可以直接看最后面有完整的代碼最近在做一個(gè)圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個(gè)一個(gè)分享一下先上一個(gè)最終的效果首先畫一整個(gè)圓定義進(jìn)度為定義總進(jìn)度為定義圓的半徑為至此大圓畫完上面的代碼需要注意的是方法的 如果不想看步驟的可以直接看最后面有完整的代碼 最近在做一個(gè)圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個(gè)一個(gè)分享一下 先上一個(gè)最...

    springDevBird 評論0 收藏0

  • step by step:圓形loading進(jìn)度條實(shí)現(xiàn)步驟詳解

    摘要：簡介實(shí)際開發(fā)中，文件的圖片的加載等情形下經(jīng)常需要展示進(jìn)度情況。最簡單的直接顯示百分之多少即可，然后一般情況下就是條形進(jìn)度條，設(shè)置長度表示已完成進(jìn)度。這里介紹一下稍微復(fù)雜的圓形進(jìn)度條如何實(shí)現(xiàn)。 簡介 實(shí)際開發(fā)中，文件的download、upload、圖片的加載等情形下經(jīng)常需要展示進(jìn)度情況。 最簡單的直接顯示百分之多少即可，然后一般情況下就是條形進(jìn)度條，設(shè)置長度表示已完成進(jìn)度。這里介紹一下...

    LancerComet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<