canvas系列教程02 直線和曲線

2021-08-13 21:24:26 字數 1023 閱讀 1172

這篇文章說下常見的坑和我們常用資料又比那些基礎的線框實用些的曲線。

啥也不說,先上一梭子**。

``````

moveto ,lineto,設個寬度顏色一stroke(描邊),完事兒。

好了,我告訴上面的例子是坑爹玩意,直接上坑。

``````

是不是發現圖形變形了,我不想解釋太多為什麼,記住就好了,還是那句話,你先會用canvas畫寫簡單的東西,比如餅圖,比如畫個棋盤,比如做個ps裡面的去色之類的,基礎東西不會之前扯理論和名詞都是裝13.

只說結果,不要在樣式裡面定義canvas的寬高,直接 標籤裡面定義,解決方案上,

``````

我知道有些人會說這樣結構表現不分離啊(說這句話的50%以上都是裝b狗),滿足你要求。

``````

感覺天都亮了,吼吼,注意樣式比屬性的優先順序高,千萬別因為我這句話去研究優先順序,因為實際工作中用的很少,面試考這些的都是……先把我給你的例子敲會了,學不好的大部分不是腦子笨,是特麼的腦子太好使,閒的蛋疼想得太多了。

第二個坑,沒有乙個專案只畫乙個圖形的,多圖形畫的時候,這麼玩。

``````

好,我們開始玩曲線,***,曲線是最美的,比如,

![曲線美.jpg](

好,回到技術,生活這麼美好,我們先畫個笑臉再說。

![笑臉.png](

``````

說一點,arc用的是弧度,d2a不明白也沒事,會用就行了。

最後說下最迷人的兩個曲線,名字我就不說了,我拼音學的不好。

``````

這個也很簡單吧,最後給大家上兩個例子,這個有點小複雜,不過你忍得住,因為太美了。

``````

很多人都搞不明白那些點怎麼來的,多說一句其實計算的是兩點中線(quadraticcurveto),三次我就不解釋了,因為算兩次中線,你不知道資料沒事,直接找設計師要就ok.

最後,幫你理解點,我把所有的點都畫出來,

``````

真棒,最後感謝我們家太白陪我敲**。

![太白.jpg](

``````

canvas系列教程07 canvas動畫基礎1

上面我們玩了乙個圖表,大家學好結構,然後在那個基礎上去擴充套件各種圖表,慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本,分析分析,讀 對提高用處很大。我說了canvas兩大主流用途,乙個是圖表,乙個是遊戲,在寫遊戲專案之前,我們先來點基礎,關於動畫,沒有動畫基礎講canvas遊...

canvas系列教程07 canvas動畫基礎1

上面我們玩了乙個圖表,大家學好結構,然後在那個基礎上去擴充套件各種圖表,慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本,分析分析,讀 對提高用處很大。我說了canvas兩大主流用途,乙個是圖表,乙個是遊戲,在寫遊戲專案之前,我們先來點基礎,關於動畫,沒有動畫基礎講canvas遊...

canvas系列教程08 canvas各種坑

首先是編輯器,之前用了用atom,這幾天寫了乙個canvas圖表庫,全程使用atom,說下感受。webstorm 就相當於你媽,你想要的不想要的都給你,但是顯得有點嘮嘮叨叨 功能太全,好多用不上,開啟慢 而atom就相當於你的兒子,一張白紙,只要你調理的好,太就會按照你的想法去做事兒 簡潔的介面,豐...