canvas
目標
- 掌握canvas的基本畫圖操作
- 實現一個雨滴效果
canvas是什麼？
HTML5 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。
不過， 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext(“2d”) 對象屬性和方法，可用於在畫布上繪製文本、線條、矩形、圓形等等。
注意：Internet Explorer 8 以及更早的版本不支持 元素。
1、canvas基本繪製方法
準備工作
- 創建畫布
const canvas = document.querySelector(‘canvas’);
- 準備畫筆（2d）
const ctx = canvas.getContext(‘2d’);
- 座標系
畫筆（YY、想）
1.畫矩形
rect(x,y,w,h)
2.畫圓（圓弧）
arc(x,y,r,start,end)
補充：
1.開啓一個新的筆畫
beginPath()
2.畫布大小
canvas本身畫布只有150寬，100高度，如果要去改變這個canvas畫布的大小，就一定要在canvas這個對象身上改變他的寬高，不然的話就會讓畫布裏面的內容發虛
繪製
1.繪製空心
stroke()
2.繪製實心
fill()
畫筆樣式
1.畫筆顏色
空心的顏色樣式
strokeStyle = ‘green’
實心的顏色樣式
fillStyle = ‘red’
2.畫筆粗細
lineWidth = 10
2、canvas繪製下雨效果
1、雨滴從天上形成，然後落下的一個過程
代碼的方式去理解：一個個的矩形盒子從上面的座標移動下來
2.雨滴落下到了地面上，打開的水花
代碼的方式去理解：一個個的原型不斷的變大
可以添加csheima7獲取更多免費資料