5 繪製雨滴n個不能同時下落
問題一 canvas寬高設定出現白邊
問題二 canvas具有預設大小 300px150px
問題三 canvas自適應頁面大小如何實現
問題四 雨滴繪製原理
問題五 setintervalmoverain100060
問題六 乙個函式在沒有指定呼叫主體前它的this永遠指向window
##1.1 設定canvas款到與瀏覽器相同
1.1.1： 獲取canvas元素
1.1.2： 獲取瀏覽器寬高
1.1.3： 為canvas元素設定寬高
1.1.4：當視窗大小變化時，自動調整canvas大小
1.2.1 繪製矩形
1.2.2 繪製圓形
1.2.3 繪製雨滴
1.2.4繪製落地後的水花
原因：canvas是內聯元素，預設display:inline;白邊為行間距。
解決方案：display:block;
參考鏈結
方案一：css設定100%
body
html,body
#rain
原因：
將canvas按img理解，canvas樣式寬高改變了，但是canvas自身的寬高卻不變。當兩者的寬高比例不同時，出現內容拉伸。
自適應是指元素的dispaly size縮放，是css布局維度（css layout dimension）自適應。而canvas的width/height屬性對應的是畫布內的coordinate space，不屬於css負責.canvas的顯示大小可以由css規則指定，但是其內部元素的畫素不對應css畫素或螢幕物理畫素進行縮放顯示。
方案二：使用js獲取window寬高，為canvas設定
原理：使用樣式的寬高比重新設定畫布的寬高比。發生重繪。
獲取canvas元素，只能用id
var can=document.getelementbyid("rain");
瀏覽器的寬高存放在windows的全域性變數
var w=window.innerwidth;
var h=window.innerheight;
設定canvas寬高
can.width=w;
can.height=h;
當視窗大小變化時，自動調整canvas大小
//監控瀏覽器寬高變化
window.onresize=function
()
繪製：
方案一：繪製不同透明度的矩形進行拼接。
方案二：對於一種rgb的矩形，覆蓋層數不等的一種rgba整體頁面。
方案二更加便於實現。
1. satinterval不寫函式本體，
2. 函式體內不能寫setinterval
3. 16ms所有的
4. 在第0秒就執行moverain，隔16ms再執行一次，
5. 然而此時rainarray還沒有內容，因為建立雨滴是相隔200ms建立一次
6. 進而移動函式moberain中無操作物件
7. 盡量不用setinterval
8. js發現此語句，插入到棧中，間隔執行，無論其他函式怎樣執行
9. 缺點：(1)丟幀 ，當callback函式執行時間太長超過setinterval間隔時(2)執行主體 window this指向問題
/*封裝框架時，this的指向，上下文，作用域
var obj=)();//執行obj.add()輸出為undefined)
*/(function().bind(this))();//執行obj.add()輸出為undefined ;bind(this)之後輸出為2),this指向}}
obj.add();
function aaa()
function bbb(cb)
bbb.call(obj,aaa);
*/
canvas 雨滴特效
一 雨滴特效需求 雨滴從視窗頂部隨機下落到達底部將呈現波紋逐漸散開變淡直到消失，雨滴特效隨視窗變化自適應 二 雨滴實現思路 1.用物件導向的思維 首先建立canvas畫布 繪製乙個雨滴的初始化形狀 2.在給雨滴新增運動的方法 3.通過定時器讓雨滴運動起來 三 具體分析 1.雨滴初始化需要的屬性有哪些...
canvas學習總結六 繪製矩形
在第三章中 canvas學習總結三 繪製路徑 線段 我們提高canvas繪圖環境中有些屬於立即繪製圖形方法，有些繪圖方法是基於路徑的。立即繪製圖形方法僅有兩個strokerect fillrect 兩個方法都是用來繪製矩形的。canvas的api提供了如下三個方法，分別用於矩形的清除，描邊與填充 我...
Canvas繪製基礎
繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...