JavaScript筆記知識點整理-圖文

1、文檔可能無法思考全面，請瀏覽后下載! 一、 JavaScript基礎(chǔ)1. 變量：區(qū)分大小寫（html不區(qū)分大小寫）變量和作用域：1) Js在函數(shù)內(nèi)部直接讀取全局變量2) 在函數(shù)外部無法讀取函數(shù)內(nèi)部的局部變量3) 在函數(shù)內(nèi)部聲明變量的時候，要使用var，如果不用，則認(rèn)為聲明的是全局變量2. 標(biāo)識符的命名：第一個字符必須是字母、下劃線或$ 第二個字符及以后：字母、數(shù)字、下劃線或￥3. 保留字（不可以當(dāng)做標(biāo)識符）：4. 聲明變量：1) 聲明變量： var a；2) 賦值： a=10；3) 聲明變量和初始化變量：var a=10；4) 聲明多個變量： var x，y，z=10；5) 不聲明變量，直接使

2、用：x=105. 數(shù)據(jù)類型：1) Typeof操作符：用來檢測變量的數(shù)據(jù)類型：a) Undefined：未定義b) Boolean：布爾型c) String：字符串d) Number：數(shù)值e) Object：對象/nullf) Function：函數(shù)g) 例如：Var sun=“太陽”；Alert（typeof sun）；2) Undefined類型：定義了一個變量但是沒有給這個變量賦值、使用一個為定義的量、或者用了一個不存在的對象的屬性的時候，返回undefined3) Null類型：空字符，表示不存在的值a) 如果定義的變量準(zhǔn)備在將來用于保存對象，那么最好將該變量初始化為null。b) 養(yǎng)

3、成編碼的規(guī)范，不要忘記初始化變量。4) Boolean類型：true/false（小寫）a) Var hello=“hello world”；alert（typeof hello）/返回的是string類型24 / 26b) Var hello=Boolean（hello world； alert（typeof hello）/返回的是boolean類型c) If語句：Var hello=“hello world” if ( hello ) alert(“如果條件為true，就執(zhí)行這條語句”); else alert(“如果條件為false，就執(zhí)行這條語句”);d)5) Number類型：數(shù)字型

4、a) 整數(shù)或者實數(shù)，所有的數(shù)字都以浮點型來表示，如：var a=474；var b=54.23；b) 判定是否超過數(shù)字型的范圍：isfinite（）函數(shù)，如果沒有超過，返回true，超過了返回false。var box=10e1000;alert(isFinite(box);/返回falsec) 處理整數(shù)：parseInt（）函數(shù)6) String類型：表示由零或多個16位Unicode字符組成的字符序列，即字符串。a) 字符串可以由雙引號(“”)或單引號()表示。b) Tostring（）函數(shù)：把值換成字符串7) Object類型：一組數(shù)據(jù)和功能的集合a) Var box = new obj

5、ect（）；b) Object里可以任意傳參，可以傳數(shù)值、字符串、布爾值等。而且，還可以進(jìn)行相應(yīng)的計算。6. 轉(zhuǎn)義序列：a) n：換行b) t：制表c) b：空格d) r：回車e) f：換頁f) ：斜杠7. 運算符：8. 數(shù)組：1) Push（）：追加數(shù)組數(shù)據(jù)2) Pop（）：刪除數(shù)組最后一個數(shù)據(jù)3) Shift（）：移除數(shù)組第一個數(shù)據(jù)4) Unshift（）:把數(shù)據(jù)移到數(shù)組的第一位9. 實例屬性和類屬性：實例屬性：在函數(shù)中用this前綴修飾的變量，要通過對象來訪問類屬性：在函數(shù)中以函數(shù)名前綴修飾的變量，類屬性是整個類的，可以通過類（函數(shù)）來訪問。局部變量：只能在函數(shù)里面訪問10. 函數(shù)：1)

6、 函數(shù)的聲明：a) 無參函數(shù)：function box（）Alert（只有函數(shù)被調(diào)用，我才會被執(zhí)行）調(diào)用函數(shù)：box（）；b) 有參函數(shù)：function box（name，age）Alert（你的名字+name+年齡+age）調(diào)用函數(shù)并且傳參數(shù)：box（爆米花，12）；c) 定義函數(shù)的三種方式：定義命名函數(shù) 定義匿名函數(shù) 使用function類匿名函數(shù)var s = new Function（nume，document.write（Function定義的函數(shù)+document.write（“你好”+name）+）2) 遞歸函數(shù)：3) Return返回值：4) Arguments對象：a) 是

7、所在函數(shù)的一個內(nèi)置類數(shù)組對象，可以用數(shù)組的i和.length。b) Sdc) 重載：就是根據(jù)參數(shù)選擇相同函數(shù)名而參數(shù)不同的函數(shù)11. 調(diào)用函數(shù)的三種方式1) 直接調(diào)用函數(shù)2) 以call（）方法調(diào)用函數(shù)：需要動態(tài)傳入一個函數(shù)引用（動態(tài)的調(diào)用函數(shù)）函數(shù)的引用.call（調(diào)用者，參數(shù)1，參數(shù)2）3) 以apply（）方法調(diào)用函數(shù)4) Apply（）和call（）的區(qū)別：Call（）調(diào)用的時候，必須在括號內(nèi)詳細(xì)的列出每個參數(shù)Apply（）動態(tài)調(diào)用的時候，可以在括號中用arguments來代表所有參數(shù)12. 對象的創(chuàng)建1) 使用new關(guān)鍵字調(diào)用構(gòu)造器創(chuàng)建對象2) 使用object直接創(chuàng)建對象Js的對象

8、都是object類的子類3) 使用json創(chuàng)建對象二、 語句1. Foreach循環(huán)：for（var 變量名 in 數(shù)組名） 2. For循環(huán)：for（var 變量名；范圍；變量+/-） 3. If語句4. While語句5. Do while語句6. Switch語句7. Break：跳出整個循環(huán)（當(dāng)前所在的循環(huán)）Continue：結(jié)束本次循環(huán)，進(jìn)行下一次循環(huán)跳出外層循環(huán)：設(shè)置標(biāo)簽，如圖三、 DOM（document object model）文檔對象模型1. DOM HTML1) 改變HTML內(nèi)容：Document.getElementById(id).innerHTML = new ht

9、ml; id.innerHTML=新內(nèi)容或者：2) 改變HTML屬性Document.getEelementId(id).attribute = new value; id.屬性=新的屬性值2. DOM CSSDocument.getEelementId(id).perty=new style; id.style.屬性=新的屬性值3. DOM事件1) Onclick事件：在html元素上點擊執(zhí)行function；2) Ondblclick時間：雙擊觸發(fā)3) Onload事件/onunload事件共同點：在用戶進(jìn)入或者離開頁面的時候被觸發(fā)； 用于處理cookie 不同點：onl

10、oad檢測發(fā)訪問者的瀏覽器類型和版本，加載網(wǎng)頁的正確版本4) Onchange事件：對輸入的字段進(jìn)行驗證5) Onmouseover/onmouseout事件：鼠標(biāo)放在元素上面/移動的時候觸發(fā)函數(shù) 類似偽元素選擇器：hover，不同在于這個觸發(fā)函數(shù)6) Onmousedown/onmouseup事件：點擊按鈕的時候觸發(fā)事件1，松開鼠標(biāo)后， 觸發(fā)事件2，最后結(jié)束的時候，類似事件onclick。7) Onfocus事件：獲得焦點8) Onblur時間：失去焦點9) Onkeydown/onkeypress/onkeyup：按下鍵盤某個鍵的時候觸發(fā)/單機(jī)鍵盤某個鍵/松開鍵盤某個鍵10) Onrese

11、t：重置表單的時候觸發(fā)Onsubmit：提交11) Onsize：改變窗口大小4. DOM 節(jié)點1) 添加節(jié)點：第一步:創(chuàng)建一個新的元素類型：createElement（）； 第二步：在創(chuàng)建一個元素節(jié)點 第三步：在元素的后面追加這個節(jié)點 在已有的元素里面追加這個新的元素 第四步：定義原有對象的元素名稱 第五步：向已有的元素后面追加新的元素 2) 刪除節(jié)點：第一步：獲取父元素id 第二步：獲取將要刪除元素的id 第三步：從父元素中刪除子元素3) 修改html元素a) innerHTML：div/span/td內(nèi)容的呈現(xiàn)b) value：textarea內(nèi)容的呈現(xiàn)c) className：修改HT

12、ML的css樣式：class選擇器名稱d) style：修改HTML元素的內(nèi)聯(lián)css樣式e) optionsindex：select指定列表4) 復(fù)制當(dāng)前節(jié)點： node cloneNode（boolean t/f）：復(fù)制當(dāng)前節(jié)點。當(dāng)值為true，表示在復(fù)制當(dāng)前節(jié)點的同時，復(fù)制該節(jié)點的全部及其后代當(dāng)值為false，表示只復(fù)制當(dāng)前節(jié)點5) 插入節(jié)點：InsertBefore（Node newNode，Node refNode）：在refNode節(jié)點之前插入newNode6) 替換節(jié)點：replaceChild（Node newNode，Node oldNode）；7) 為列表框和下拉菜單添加選項

13、a) HTMLSelectElement 的add方法進(jìn)行添加選項Add（option，before）：在before選項之前添加option選項，before指定為奴的時候可以將option選項添加到最后b) 直接為select的執(zhí)行選項賦值appendChild（option）；c) New option（text，value，defaultselected，selected）Text：選項的文本Value：選中該選項的值DefaultSelect：默認(rèn)是否選中選項Selected：該選項當(dāng)前是否被選中8) 動態(tài)添加表格內(nèi)容：a) insertRow（index）：在指定索引處插入一行b)

14、 createCaption（）：為表格創(chuàng)建標(biāo)題c) insertCell（long index）：在指定索引處創(chuàng)建一個單元格9) 節(jié)點訪問HTML元素：a) ParentNode：返回當(dāng)前節(jié)點的父節(jié)點b) PreviousSibling：返回當(dāng)前節(jié)點的前一個兄弟節(jié)點c) nextSibling：返回當(dāng)前節(jié)點的下一個兄弟節(jié)點d) childElementByTagName（tagName）：返回當(dāng)前節(jié)點的具有指定標(biāo)簽名的所有子節(jié)點e) firstChild：返回當(dāng)前節(jié)點的第一個子節(jié)點f) lastChild：返回當(dāng)前節(jié)點的最后一個子節(jié)點10) 訪問表單控件<a) Action：表單提交的

15、地址b) Element：返回表單內(nèi)全部表單控件組成的數(shù)組c) Length：個數(shù)d) Methode) Target：_self,_blank,_parent,_top :指定提交表單式的結(jié)果窗口f) Reset（）：重置表單g) Submit（）：提交表單11) 訪問列表框和下拉菜單的選項：a) Form：返回當(dāng)前列表框或下拉菜單所在的表單對象b) Length：c) Options：返回所有選項組成的數(shù)組d) selectedIndex：返回選中選項的所有e) type：f) index：g) selected：是否被選中h) text：選項呈現(xiàn)的文本i) value：每一個選項的val

16、ue屬性12) 訪問表格子元素：a) Caption：標(biāo)題對象b) Tfoot：c) Thead：d) Tbody：e) Table.Rowsindex：返回表格的第index+1行f) Cells:單元格組成的數(shù)組g) Rowindex：行索引13) 刪除列表框和下拉菜單的選項a) Remove（long index）b) 直接將制定的選項賦值為null14) 刪除表格的行或者單元格15) 事件冒泡：當(dāng)瀏覽器執(zhí)行某個動作的時候，頁面上有多個元素相應(yīng)該事件傳遞方向：從下向上 傳遞事件16) 重定向事件：不用按照dom數(shù)上溯，希望給在不同節(jié)點之間跳躍Target。fireEvent（String

17、 event，Event event）：將事件event事件重定向到target對象<head> <meta charset="UTF-8"> <title>重定向事件</title> </head> <body onclick="c('tb元素')"> <table onclick="c('tr元素')"> <tr onclick="c('td元素')"> <td

18、onclick="c('p元素')"> <p onclick="c('btn元素')"> <input type="button" value="點擊我" onclick=""> </p> </td> </tr> </table> <hr> <input type="button" id="forward" value="

19、;被轉(zhuǎn)發(fā)的事件" onclick="c('被轉(zhuǎn)發(fā)的事件按鈕')"> <div id="re"> </div> <script> function c(who) /打印寫入放入內(nèi)容 document.getElementById("re").innerHTML +=who+"被點擊了" /取消事件冒泡 event.cancelBubble = true; /將事件重定向到id為forward的元素 document.getElementById(&q

20、uot;forward").fireEvent("onclick",event); </script> </body>5. Dom 句柄1) 特點：句柄之間互不影響，不會覆蓋 可以減少多次修改2) AddEventListenter（事件，function）：添加事件句柄3) RemoveEventListenter（事件，function）：移除事件句柄；4) 注意：加紅的function，后面不帶括號四、 對象1. 定義：javascript中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù)也可以自定 義對象。2. 訪問對象的屬性：obje

21、pertyname（對象名.屬性名）3. 訪問對象的方法：objectname.methodname()（對象名.方法()）4. 創(chuàng)建對象：1) 直接創(chuàng)建對象：person = new object（）； P = “miliy”; Person.age=44; Person.gender=”女”; Document.Write（”姓名：”+）;2) 使用對象構(gòu)造器：function person（name，age，gender）T=name;This.age=age;This.gender=gender;Myfrie

22、nd = new persion(“andy”,12,”男”)；5. 數(shù)字：1) 只有一種數(shù)字類型，不定義不同類型的數(shù)字八進(jìn)制：數(shù)字的前綴是0，默認(rèn)是八進(jìn)制十六進(jìn)制：數(shù)字的前綴是0x，默認(rèn)為十六進(jìn)制2) 對象方法：toString：把數(shù)字轉(zhuǎn)換為字符串； toLocalString：把數(shù)字轉(zhuǎn)換為字符串，使用本地數(shù)字格式順序 toFixed：把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點后有指定位數(shù) toOrecision：把數(shù)字格式化為指定長度； valueOf：返回一個Number對象的基本數(shù)字值6. 數(shù)組1) 定義：var 數(shù)組名 = new Array（）； Var 數(shù)組名 = new Array（n）

23、； Var 數(shù)組名 = new Array（元素1，元素2，元素3）； 數(shù)組變量i = 值；2) 數(shù)組長度：數(shù)組名.length修改數(shù)組長度：數(shù)組名.length = 4（你想定義的長度）；3) 拼接數(shù)組concat（數(shù)組1，數(shù)組2，數(shù)組3,）；4) 數(shù)組轉(zhuǎn)換成字符串：join（分隔符）；5) 刪除數(shù)組最后一個元素，返回最后一個元素：pop（）；6) 添加元素，返回數(shù)組元素：push（）；7) 刪除第一個元素，返回第一個元素：shift（）8) 從數(shù)組中選擇元素重新組建數(shù)組：slice（開始位置，結(jié)束位置）；9) 刪除或者替換元素：splice（位置，多少，元素）；10) 排序數(shù)組：sort（

24、）；11) 倒序數(shù)組：reverse（）；12) 返回一個包含數(shù)組中所有元素的字符串，每個元素用逗號分隔：toString（）；7. 字符串8. 邏輯9. Math（算數(shù)）對象：1) Math.round（）:四舍五入2) Math.random（）：返回0-1之間的隨機(jī)數(shù)3) Math.floor（）：舍去小數(shù)點后的，向下取，不進(jìn)位4) Math.abs（x）：返回x的絕對值5) Math.acos（x）：返回x的余弦值6) Math.sqrt（x）：返回x的平方根7) Math.pow（x）:返回x的平方10. 查找字符：1) charAt（位置）：字符串在指定位置處的字符2) index

25、Of（字符串，起始位置）：從字符串對象指定開始的位置，從前到后查找字符串3) lastIndexOf（字符串）：從后到前查找子字符串在字符串對象中的位置4) substring（開始位置，長度）：從開始位置開始截取指定長度的字符，返回截取的字符5) substring（開始位置，結(jié)束位置）；6) split（分隔符）：分割字符串到一個數(shù)組中去，把字符串變成數(shù)組7) replace（需要替代的字符，新的字符）；11. 日期對象常用函數(shù)：1) Setxxx：設(shè)置日期和事件2) Getxxx：獲取日期和時間；3) Toxxx：將日期轉(zhuǎn)換成指定格式4) Date（）：返回當(dāng)前的日期和時間5) GetD

26、ate（）：從date對象中返回某個月中的某一天6) getDay（）：從date中返回一周中的某一天77) getTime（）：獲取從1970.1.1到現(xiàn)在的毫秒數(shù)8) toTimeString：把date對象的時間轉(zhuǎn)換為字符串12. 訪問時間對象：1) ClientX：返回發(fā)生鼠標(biāo)事件在頁面中的x坐標(biāo)2) ClientY：返回發(fā)生鼠標(biāo)事件在頁面中的Y坐標(biāo)3) OffsetX：返回發(fā)生鼠標(biāo)事件位置相對于事件源的x坐標(biāo)4) OffsetY：返回發(fā)生鼠標(biāo)事件位置相對于事件源的Y坐標(biāo)13. （RegExp）正則表達(dá)式：1) 作用：用來檢索某個文本，使用一種模式來描述要減速的內(nèi)容2) 定義：var

27、a = new RegExp(“e”); 在字符串中檢索的時候，尋找的是字符“e”3) 方法：a) test（）：檢索字符串中的指定值，返回值是true或falseb) exec（）：檢索字符串中的指定值，返回的是被找到的值，如果沒有匹配到，返回null；c) compile（）：可以改變檢索模式，也可以添加或者刪除第二個參數(shù)五、 canvas：1. 語法：/獲得canvas區(qū)域var canvas = document.getElementById("diagonal"); /getContext var context = canvas.getContext("

28、;2d"); /開始繪制 context.beginPath(); /起點位置 MoveTo（x,y) /終點位置 lineTo(x,y) context.moveTo(70,140); context.lineTo(140,70); /把這個線繪制到canvas上 context.stroke();2. 繪制矩形：fillRect(x,y,width,height):矩形：（左上角x坐標(biāo)，左上角y坐標(biāo)，矩形寬度，矩形高度）3. 繪制圓：1) arc（原點，原點，半徑，開始的弧度，定義畫圓的方向）2) fill（）：填充3) stroke（）：描邊<canvas id=&quo

29、t;mycanvas" width="200" height="200"style="border: 1px solid black"></canvas><script> var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); ctx.fillStyle="pink" ctx.beginPath(); ctx.arc(70,18,15,0,Ma

30、th.PI*2,true); ctx.closePath(); ctx.fill();</script>4. 繪制帶陰影的圖形<canvas id="mycanvas" width="200" height="200"style="border: 1px solid black"></canvas><script> var c = document.getElementById("mycanvas"); var ctx = c.getContext

31、("2d"); /陰影x軸偏移 ctx.shadowOffsetX=15; ctx.shadowOffsetY=15; /模糊半徑 ctx.shadowBlur = 10; ctx.shadowColor="#ddd" ctx.fillStyle = "#00f" ctx.fillRect(20,20,150,100); /模糊顏色 </script>5. 使用圖像：1) DrawImage（image，dx，dy）：接受一個圖片，并將其繪制到canvas中 Dx：圖片左上角坐標(biāo)，dy圖片左上角y坐標(biāo)2) DrawImag

32、e（image，dx，dy，dw，dh）：接受一個圖片，將其縮放到寬度為dw，高度為dh，把圖片放在canvas中（da，dy）的位置3) DrawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）：接受一個范圍，通過（sx，sy，sw，sh）指定圖片裁剪的范圍，然后把裁剪過得圖片放到canvas的位置范圍中六、 閉包1. 如何從外部讀取局部變量（閉包）：在一個函數(shù)內(nèi)部，再定義一個函數(shù)：第一步：定義一個普通函數(shù)f1（）；第二步：在f1中定義一個普通函數(shù)f2（）；第三步：在f1中返回f2（在f1中返回f2的引用）第四步：執(zhí)行f1，把f1的返回結(jié)果復(fù)制給變量c；第五步：執(zhí)行c

33、（）；函數(shù)A的內(nèi)部函數(shù)B被函數(shù)A以外的一個變量C引用Function f1（） Var n=99;Function f2() Alert(n);Return f2;Var result =f1();Result();/99外部可以訪問局部變量2. 閉包：當(dāng)一個內(nèi)部函數(shù)被其他函數(shù)之外的變量引用的時候，就形成了閉包。3. 閉包的特性：1) 函數(shù)嵌套函數(shù)2) 函數(shù)內(nèi)部可以引用外部的參數(shù)和變量3) 參數(shù)和變量不會被垃圾回收機(jī)制回收4. 閉包的用途：1) 可以直接讀取函數(shù)內(nèi)部定義的變量2) 讓這些變量的值始終存在內(nèi)存中5. 注意：1) 問題1：閉包會使函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗大，所以不能濫

34、用，否則會導(dǎo)致網(wǎng)頁的性能問題，內(nèi)存泄漏解決方案：在退出函數(shù)的時候，將不使用的局部變量全部刪除2) 問題2：閉包會在復(fù)函數(shù)外部，改變復(fù)函數(shù)內(nèi)部的變量值，如果把復(fù)函數(shù)當(dāng)做對象使用，把閉包當(dāng)做公用方法（public），內(nèi)部變量相當(dāng)于私有屬性（private value）-不嗯呢該隨便改變復(fù)函數(shù)內(nèi)部變量的值。七、 Json1. JavaScript Object Notation：對象表示法2. 格式：key：value3. Json常用內(nèi)置類：array數(shù)組類/Date日期類/Function函數(shù)類/Math數(shù)學(xué)類/String字 符串類/Object對象類/Number數(shù)值類/Error錯誤類4.

35、 Json內(nèi)置對象：5. 它使用JavaScript對象的格式來存儲數(shù)據(jù)。JSON是靈活的，因為它允許 數(shù)據(jù)結(jié)構(gòu) 是 字符串，數(shù)字，布爾值，字符串，和 對象 的任意組合。對象與對象之間要用“，”隔開6. 訪問對象屬性：八、 正則表達(dá)式（RegExp）1. 聲明表達(dá)式：var a = new RegExp（“hello”）； Var a2 = /world/；2. 查找字符串：/字符串/gi 小寫的g：global（全局）查找全部 小寫的i：忽略大小寫3. 方法：1) Test（）：檢測會否存在，返回值為true/false；2) exec（）:

36、檢索指定的值，返回值是被找到的值，如果沒有找到，返回null；4. 字符串正則：1) match（）：匹配2) search（）：字符串查找3) replace（/換掉的字符/，“新字符”）：字符串替換4) split（）：分割字符串 變成數(shù)組的時候經(jīng)常會用到5. 數(shù)字選擇器：/d/g 獲取一個字符串的數(shù)字 /d+/g 允許表達(dá)式匹配一個或者更多的數(shù)字6. 單詞選擇器：/w/g 獲取一個字符串中的單詞7. Null字符查找：/0/g8. 空白選擇器：/s/g 查找字符串的空白這里的空白包括：" " (空格符)r (回車符)n (換行符) t&#

37、160;(制表符) f (換頁符)9. 正則表達(dá)式的字符大寫表示反義：例如：S表示非空白字符10. 方括號：1) /abc/g:對括號內(nèi)的內(nèi)容進(jìn)行查找如：/1-9/g:對1-9內(nèi)的數(shù)值進(jìn)行查找2) /abc/h：對不在括號內(nèi)的字符進(jìn)行查找11. 量詞：1) /n+/：匹配至少包含一個n字符串2) /n*/：匹配包含0個或者多個的n字符串3) /n?/: 匹配包含0個或者一個n字符串4) /nx/：匹配包含連續(xù)x個的n字符串5) /nx,y/：匹配包含連續(xù)x個到連續(xù)y個的n字符串6) /nx,/: 匹配至少含有x連續(xù)的n的字符串7) /n$/:匹配以n結(jié)尾的字符串8) /n/:匹配以n

38、開頭的字符串9) /字符1（?=字符2）/：匹配字符后面緊跟字符210) /字符1（?!字符2）/：匹配字符后面沒有緊跟字符2九、 DHTML1. DHTML：動態(tài)HTML，JS：先獲取頁面的元素，修改屬性+html DOM：+css+html2. 動態(tài)定位：1) pixelLeft：像素值2) pixelRight：3. 旋轉(zhuǎn)：<script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); /弧度轉(zhuǎn)角度的公式：degree

39、*Math.PI/180 ctx.rotate(20*Math.PI/180); /繪制的長方形(x,y,width,height) ctx.fillRect(50,20,100,50);</script>4. 縮放：<script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(5,5,25,15); /scale(x方向倍數(shù)，y方向倍數(shù)) ctx.scale(2,2)/繪制的圖形

40、距離畫布左上角2倍遠(yuǎn)的位置 ctx.strokeRect(5,5,25,15); ctx.scale(2,3)/繪制的圖形距離畫布左上角2倍遠(yuǎn)的位置</script>5. Transform（a,b,c,d,e,f）：這個變換只會影響tranform（）方法調(diào)用后的繪圖，調(diào)用這個方法時，會在前一個變換矩陣基礎(chǔ)上創(chuàng)建1) a：水平縮放繪圖2) b：水平傾斜3) c：垂直傾斜4) d：垂直縮放5) e：水平移動6) f：垂直移動<canvas id="canvas" style="border: 1px solid pink"> &l

41、t;script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "yellow" ctx.fillRect(50,20,100,50); ctx.transform(1,0.5,-0.5,1,30,10); ctx.fillStyle = "pink" ctx.fillRect(50,20,100,50); ctx.transform(1,0.5,-0.5,

42、1,30,10); ctx.fillStyle = "blue" ctx.fillRect(50,20,100,50); </script>6. translate（）：重新映射畫布上（0,0）的位置 translate（）之后調(diào)用fillRexc（）之類的方法會添加到x，y坐標(biāo)值上<body><canvas id="canvas" style="border: 1px solid pink" width="500px" height="800px"> <

43、;script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(50,20,100,50); ctx.translate(100,100); ctx.fillRect(50,20,100,50); ctx.translate(100,100); ctx.fillRect(50,20,100,50); </script></body>7. 漸變： <script> var

44、 canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); /填充效果 ctx.fillStyle = grd; ctx.fillRect(50,20,500,500); </script>十、 Js常用特效1. 跑馬燈十一、 Window對象1. Alert（）：警告框2. Confirm（）：確認(rèn)對話框3. P