學習前端次日心得體會（初步瞭解HTML5的部分API以及畫布Canvas）

1、HTML5部分API

　　一、選擇器querySelector和querySelectorAll

　　　　1.一、querySelector：返回文檔中匹配指定的CSS選擇器的第一元素。　　　　　　

　　　　　　 document.querySelector(CSS selectors)，CSS selectors（指定一個或多個匹配元素的 CSS 選擇器。 能夠使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。

　　　　　　對於多個選擇器，使用逗號隔開，返回一個匹配的元素）。

　　　　1.二、querySelectorAll ： HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的全部元素節點列表。　

　　　　　　  elementList  = document.querySelectorAll(CSS selectors)，elementList 是一個靜態的 NodeList 類型的對象，CSS選擇器同上

　　二、自定義屬性

　　　　在HTML5中自定義屬性使用「data-*「來完成，其中屬性名（即*號）不要包含大寫字母，在 data- 後必須至少有一個字符。該屬性能夠是任何字符串。

　　　　好比咱們自定義屬性爲data-test-name,那麼咱們在調用選擇器獲取該屬性後，要獲取具體的值則爲testName。

2、畫布Canvas

　　一、新建Canvas標籤並定義畫布的長度和寬度，注意：Canvas畫布的長度和寬度只能在Canvas標籤上進行定義，不能再css中進行定義

　　

　　二、獲取Canvas對象並建立Canvas的context 對象（canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成）

　　

 　　三、肯定起始點，即肯定落筆點（moveTo(x,y)） 。x：x軸起始像素，y：y軸起始像素

   　

　　四、肯定下一落筆點（lineTo(x,y)）。x：x軸落筆像素，y：y軸落筆像素

　　

　　五、連線描邊（stroke()）

　　

　　結果以下：