資訊專欄INFORMATION COLUMN
摘要：一個沒什么特別的日子，你接到了一個沒什么特別的設(shè)計圖，準(zhǔn)備寫個沒什么特別的活動頁，然后，看到了一個效果唔，射雞獅啊，你這個圓是不是沒畫好啊，缺了個角。唔，那個是不是可以畫畫作為一個熟練操作和的前端工程師，那就去看看有沒有提供什么讓我們的吧。
一個沒什么特別的日子，你接到了一個沒什么特別的設(shè)計圖，準(zhǔn)備寫個沒什么特別的活動頁，然后，看到了一個效果：
“唔，射雞獅啊，你這個圓是不是沒畫好啊，缺了個角。”
“這是設(shè)計，你懂不懂？你照著設(shè)計稿做就完事了，別嗶嗶。”
“擦，缺個角的圓讓我怎么做！？你聽我說，CSS只能畫圓，而且你這個環(huán)的兩端還是圓的……”
“有沒有搞錯，這點(diǎn)小圖都做不出來，要不換個前端來跟我對接吧?！?br>作為一個有尊嚴(yán)的前端工程師，那肯定要證明自己！想想有沒有什么辦法吧。唔，那個Canvas是不是可以畫畫？
作為一個熟練操作ctrl + c和ctrl + v的前端工程師，那就去看看Canvas有沒有提供什么API讓我們ctrl + c的吧。
官方文檔那些文縐縐的東西就不帶大家看了，這里分享給大家一個不錯的Canvas教程。由于我們的目的是證明自己，趕緊翻了翻這個教程的目錄，立馬發(fā)現(xiàn)了一個標(biāo)題《繪制標(biāo)準(zhǔn)圓弧》，這是不是我們想要的東西呢？
拋開那些什么復(fù)雜的圓弧什么曲線，會發(fā)現(xiàn)一個API:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中startAngle以及endAngle是起始與結(jié)束的位置，它們的單位是弧度，那我們只要利用好這兩位置，就能畫出一個不閉合的圓了！直觀點(diǎn)的圖：
codepen看看
GET！這就是我們想要的樣子！這只是成功的第一步，看看跟效果圖的差別，我們還差一個外圈框住這個綠色的圈。
codepen看看
這簡直就是高保真還原設(shè)計圖嘛！剩下的事情就簡單啦，只需要讓這個綠色的圈能動起來就完事了！
這個動畫思路還是比較明確的，無非就是一幀幀地讓內(nèi)圈從一個位置轉(zhuǎn)到另一個位置直至到達(dá)結(jié)束的位置：
codepen看看
到此為止，你就證明了自己，找回前端工程師的尊嚴(yán)！走，打射雞獅去！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113518.html
摘要：一個沒什么特別的日子，你接到了一個沒什么特別的設(shè)計圖，準(zhǔn)備寫個沒什么特別的活動頁，然后，看到了一個效果唔，射雞獅啊，你這個圓是不是沒畫好啊，缺了個角。唔，那個是不是可以畫畫作為一個熟練操作和的前端工程師，那就去看看有沒有提供什么讓我們的吧。 一個沒什么特別的日子，你接到了一個沒什么特別的設(shè)計圖，準(zhǔn)備寫個沒什么特別的活動頁，然后，看到了一個效果：showImg(https://segme...
摘要：在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計算進(jìn)度條的大小； 2、在小程序...
摘要：在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。但使用和實(shí)現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時候，遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩： 1、為了實(shí)現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計算進(jìn)度條的大??； 2、在小程序...
摘要：如果不想看步驟的可以直接看最后面有完整的代碼最近在做一個圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個一個分享一下先上一個最終的效果首先畫一整個圓定義進(jìn)度為定義總進(jìn)度為定義圓的半徑為至此大圓畫完上面的代碼需要注意的是方法的 如果不想看步驟的可以直接看最后面有完整的代碼 最近在做一個圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個一個分享一下 先上一個最...
摘要：簡介實(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)度。這里介紹一下...
閱讀 3843·2023-04-25 16:32
閱讀 2224·2021-09-28 09:36
閱讀 2042·2021-09-06 15:02
閱讀 682·2021-09-02 15:21
閱讀 929·2019-08-30 15:56
閱讀 3525·2019-08-30 15:45
閱讀 1719·2019-08-30 13:09
閱讀 391·2019-08-29 16:05
