教你五分鐘入門使用html5 svg繪製圖形

跟着步驟學習，耐心點好麼，不要只看圖不看文字，只看圖5天都學不會。
我在工做中用不到h5繪圖，因此我是個小菜鳥。但我始終有一種迷之信念，任何已經存在的東西學一下就會了。
因此恰好，我順即可以講一下個人學習步驟

1.我首先下了一個demo

感謝全部愛分享的程序員。
挑選demo的時候要注意，不能只挑選酷炫的，難易程度要根據本身的水平去選擇。
我選了一個生日蛋糕的demo

2.看demo目錄文件

固然起初demo下載下來目錄結構內容不少，有js啊什麼的，把不用的都須要清理掉，當剩下這三個文件的時候，個人心情是愉悅的。

reset.css 的內容

看了下是基礎的css配置，就以爲so easy

style.css的內容

是一些動畫，就以爲更容易了

index.html

由於沒接觸過，看到這些內容我是懵逼的，是不開心的，但又特麼是愉悅的，由於我只要看懂這些就行了

3.搞懂svg究竟是什麼鬼

其實這樣學習有一點本末倒置的感受，但我仍是習慣先勾起本身的興趣跟慾望，畢竟慾望是魔鬼。

SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。
在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。
特色：
　不依賴分辨率
　支持事件處理器
　最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
　複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
　適合遊戲應用

4.svg下的屬性學習

svg不一樣於canvas，提供了不少基本形狀

矩形 - rect元素/圓 - circle元素/橢圓 - ellipse元素/直線 - line元素/折線 - polyline元素/多邊形 - polygon元素/路徑 - path元素

能夠看到蛋糕的最下面一層是個矩形，很容易看明白意思，就很少說了

重點須要說一下蛋糕用到的最多的
路徑 - path元素

看代碼 屬性d 應該就是繪圖了。

不過須要注意的事情是，每個指令還有大小寫的功能的區分哦，這點很重要，哈哈。
https://developer.mozilla.org...
MDN上面有關於d的詳解
很詳細還有分步驟解說，很適合剛學習的，能夠去看看。

5.最後須要加入動畫

看着代碼是否是也很容易啊，就是須要幾個動畫關鍵幀處理。
over 了～
ps：早睡早起，常作運動，多與異性交朋友～

宣傳下個人訂閱號
按期推送

• 前端相關技術

• 聽，某人在講故事哄你睡覺了系列

• 黑，程序員漫畫系列

• 程序員天生愛分享系列