JavaScript筆記知識點整理 圖文

JavaScript筆記知識點整理圖文JavaScript筆記知識點整理圖文/NUMPAGES47JavaScript筆記知識點整理圖文JavaScript筆記知識點整理圖文JavaScript基礎(chǔ)變量：區(qū)分大小寫（html不區(qū)分大小寫）變量和作用域：Js在函數(shù)內(nèi)部直接讀取全局變量在函數(shù)外部無法讀取函數(shù)內(nèi)部的局部變量在函數(shù)內(nèi)部聲明變量的時候，要使用var，如果不用，則認(rèn)為聲明的是全局變量標(biāo)識符的命名：第一個字符必須是字母、下劃線或$第二個字符及以后：字母、數(shù)字、下劃線或￥保留字（不可以當(dāng)做標(biāo)識符）：聲明變量：聲明變量：vara；賦值：a=10；聲明變量和初始化變量：vara=10；聲明多個變量：varx，y，z=10；不聲明變量，直接使用：x=10數(shù)據(jù)類型：Typeof操作符：用來檢測變量的數(shù)據(jù)類型：Undefined：未定義Boolean：布爾型String：字符串Number：數(shù)值Object：對象/nullFunction：函數(shù)例如：Varsun=“太陽”；Alert（typeofsun）；Undefined類型：定義了一個變量但是沒有給這個變量賦值、使用一個為定義的量、或者用了一個不存在的對象的屬性的時候，返回undefinedNull類型：空字符，表示不存在的值如果定義的變量準(zhǔn)備在將來用于保存對象，那么最好將該變量初始化為null。養(yǎng)成編碼的規(guī)范，不要忘記初始化變量。Boolean類型：true/false（小寫）Varhello=“helloworld”；alert（typeofhello）//返回的是string類型Varhello=Boolean（helloworld；alert（typeofhello）//返回的是boolean類型If語句：Varhello=“helloworld”if(hello){ alert(“如果條件為true，就執(zhí)行這條語句”);}else{ alert(“如果條件為false，就執(zhí)行這條語句”);}Number類型：數(shù)字型整數(shù)或者實數(shù)，所有的數(shù)字都以浮點型來表示，如：vara=474；varb=54.23；判定是否超過數(shù)字型的范圍：isfinite（）函數(shù)，如果沒有超過，返回true，超過了返回false。varbox=10e1000; alert(isFinite(box)); //返回false處理整數(shù)：parseInt（）函數(shù)String類型：表示由零或多個16位Unicode字符組成的字符序列，即字符串。字符串可以由雙引號(“”)或單引號(‘’)表示。Tostring（）函數(shù)：把值換成字符串Object類型：一組數(shù)據(jù)和功能的集合Varbox=newobject（）；Object里可以任意傳參，可以傳數(shù)值、字符串、布爾值等。而且，還可以進(jìn)行相應(yīng)的計算。轉(zhuǎn)義序列：\n：換行\(zhòng)t：制表\b：空格\r：回車\f：換頁\\：斜杠運算符：數(shù)組：Push（）：追加數(shù)組數(shù)據(jù)Pop（）：刪除數(shù)組最后一個數(shù)據(jù)Shift（）：移除數(shù)組第一個數(shù)據(jù)Unshift（）:把數(shù)據(jù)移到數(shù)組的第一位實例屬性和類屬性：實例屬性：在函數(shù)中用this前綴修飾的變量，要通過對象來訪問類屬性：在函數(shù)中以函數(shù)名前綴修飾的變量，類屬性是整個類的，可以通過類（函數(shù)）來訪問。局部變量：只能在函數(shù)里面訪問函數(shù)：函數(shù)的聲明：無參函數(shù)：functionbox（）{Alert（‘只有函數(shù)被調(diào)用，我才會被執(zhí)行’）}調(diào)用函數(shù)：box（）；有參函數(shù)：functionbox（name，age）{Alert（‘你的名字’+name+‘年齡’+age）}調(diào)用函數(shù)并且傳參數(shù)：box（‘爆米花’，12）；定義函數(shù)的三種方式：定義命名函數(shù)定義匿名函數(shù)使用function類匿名函數(shù)vars=newFunction（‘nume’，document.write（‘Function定義的函數(shù)’+document.write（“你好”+name））+）遞歸函數(shù)：Return返回值：Arguments對象：是所在函數(shù)的一個內(nèi)置類數(shù)組對象，可以用數(shù)組的[i]和.length。Sd重載：就是根據(jù)參數(shù)選擇相同函數(shù)名而參數(shù)不同的函數(shù)調(diào)用函數(shù)的三種方式直接調(diào)用函數(shù)以call（）方法調(diào)用函數(shù)：需要動態(tài)傳入一個函數(shù)引用（動態(tài)的調(diào)用函數(shù)）函數(shù)的引用.call（調(diào)用者，參數(shù)1，參數(shù)2）以apply（）方法調(diào)用函數(shù)Apply（）和call（）的區(qū)別：Call（）調(diào)用的時候，必須在括號內(nèi)詳細(xì)的列出每個參數(shù)Apply（）動態(tài)調(diào)用的時候，可以在括號中用arguments來代表所有參數(shù)對象的創(chuàng)建使用new關(guān)鍵字調(diào)用構(gòu)造器創(chuàng)建對象使用object直接創(chuàng)建對象Js的對象都是object類的子類使用json創(chuàng)建對象語句Foreach循環(huán)：for（var變量名in數(shù)組名）{}For循環(huán)：for（var變量名；范圍；變量++/--）{}If語句While語句Dowhile語句Switch語句Break：跳出整個循環(huán)（當(dāng)前所在的循環(huán)）Continue：結(jié)束本次循環(huán)，進(jìn)行下一次循環(huán)跳出外層循環(huán)：設(shè)置標(biāo)簽，如圖DOM（documentobjectmodel）文檔對象模型DOMHTML改變HTML內(nèi)容：Document.getElementById(id).innerHTML=newhtml;id.innerHTML=新內(nèi)容或者：改變HTML屬性Document.getEelementId(id).attribute=newvalue;id.屬性=新的屬性值DOMCSSDocument.getEelementId(id).perty=newstyle;id.style.屬性=新的屬性值DOM事件Onclick事件：在html元素上點擊執(zhí)行function；Ondblclick時間：雙擊觸發(fā)Onload事件/onunload事件共同點：在用戶進(jìn)入或者離開頁面的時候被觸發(fā)；用于處理cookie不同點：onload檢測發(fā)訪問者的瀏覽器類型和版本，加載網(wǎng)頁的正確版本Onchange事件：對輸入的字段進(jìn)行驗證Onmouseover/onmouseout事件：鼠標(biāo)放在元素上面/移動的時候觸發(fā)函數(shù)類似偽元素選擇器：hover，不同在于這個觸發(fā)函數(shù)Onmousedown/onmouseup事件：點擊按鈕的時候觸發(fā)事件1，松開鼠標(biāo)后，觸發(fā)事件2，最后結(jié)束的時候，類似事件onclick。Onfocus事件：獲得焦點Onblur時間：失去焦點Onkeydown/onkeypress/onkeyup：按下鍵盤某個鍵的時候觸發(fā)/單機鍵盤某個鍵/松開鍵盤某個鍵Onreset：重置表單的時候觸發(fā)Onsubmit：提交Onsize：改變窗口大小DOM節(jié)點添加節(jié)點：第一步:創(chuàng)建一個新的元素類型：createElement（）；第二步：在創(chuàng)建一個元素節(jié)點第三步：在元素的后面追加這個節(jié)點在已有的元素里面追加這個新的元素第四步：定義原有對象的元素名稱第五步：向已有的元素后面追加新的元素刪除節(jié)點：第一步：獲取父元素id第二步：獲取將要刪除元素的id第三步：從父元素中刪除子元素修改html元素innerHTML：div/span/td內(nèi)容的呈現(xiàn)value：textarea內(nèi)容的呈現(xiàn)className：修改HTML的css樣式：class選擇器名稱style：修改HTML元素的內(nèi)聯(lián)css樣式options[index]：select指定列表復(fù)制當(dāng)前節(jié)點：nodecloneNode（booleant/f）：復(fù)制當(dāng)前節(jié)點。當(dāng)值為true，表示在復(fù)制當(dāng)前節(jié)點的同時，復(fù)制該節(jié)點的全部及其后代當(dāng)值為false，表示只復(fù)制當(dāng)前節(jié)點插入節(jié)點：InsertBefore（NodenewNode，NoderefNode）：在refNode節(jié)點之前插入newNode替換節(jié)點：replaceChild（NodenewNode，NodeoldNode）；為列表框和下拉菜單添加選項HTMLSelectElement的add方法進(jìn)行添加選項Add（option，before）：在before選項之前添加option選項，before指定為奴的時候可以將option選項添加到最后直接為select的執(zhí)行選項賦值appendChild（option）；Newoption（text，value，defaultselected，selected）Text：選項的文本Value：選中該選項的值DefaultSelect：默認(rèn)是否選中選項Selected：該選項當(dāng)前是否被選中動態(tài)添加表格內(nèi)容：insertRow（index）：在指定索引處插入一行createCaption（）：為表格創(chuàng)建標(biāo)題insertCell（longindex）：在指定索引處創(chuàng)建一個單元格節(jié)點訪問HTML元素：ParentNode：返回當(dāng)前節(jié)點的父節(jié)點PreviousSibling：返回當(dāng)前節(jié)點的前一個兄弟節(jié)點nextSibling：返回當(dāng)前節(jié)點的下一個兄弟節(jié)點childElementByTagName（tagName）：返回當(dāng)前節(jié)點的具有指定標(biāo)簽名的所有子節(jié)點firstChild：返回當(dāng)前節(jié)點的第一個子節(jié)點lastChild：返回當(dāng)前節(jié)點的最后一個子節(jié)點訪問表單控件<Action：表單提交的地址Element：返回表單內(nèi)全部表單控件組成的數(shù)組Length：個數(shù)MethodTarget：_self,_blank,_parent,_top:指定提交表單式的結(jié)果窗口Reset（）：重置表單Submit（）：提交表單訪問列表框和下拉菜單的選項：Form：返回當(dāng)前列表框或下拉菜單所在的表單對象Length：Options：返回所有選項組成的數(shù)組selectedIndex：返回選中選項的所有type：index：selected：是否被選中text：選項呈現(xiàn)的文本value：每一個選項的value屬性訪問表格子元素：Caption：標(biāo)題對象Tfoot：Thead：Tbody：Table.Rows[index]：返回表格的第index+1行Cells:單元格組成的數(shù)組Rowindex：行索引刪除列表框和下拉菜單的選項Remove（longindex）直接將制定的選項賦值為null刪除表格的行或者單元格事件冒泡：當(dāng)瀏覽器執(zhí)行某個動作的時候，頁面上有多個元素相應(yīng)該事件傳遞方向：從下向上傳遞事件重定向事件：不用按照dom數(shù)上溯，希望給在不同節(jié)點之間跳躍Target。fireEvent（Stringevent，Eventevent）：將事件event事件重定向到target對象<head>

<metacharset="UTF-8">

<title>重定向事件</title>

</head>

<bodyonclick="c('tb元素')">

<tableonclick="c('tr元素')">

<tronclick="c('td元素')">

<tdonclick="c('p元素')">

<ponclick="c('btn元素')">

<inputtype="button"value="點擊我"onclick="">

</p>

</td>

</tr>

</table>

<hr>

<inputtype="button"id="forward"value="被轉(zhuǎn)發(fā)的事件"onclick="c('被轉(zhuǎn)發(fā)的事件按鈕')">

<divid="re">

</div>

<script>

functionc(who){

//打印寫入放入內(nèi)容

document.getElementById("re").innerHTML+=who+"被點擊了";

//取消事件冒泡

event.cancelBubble=true;

//將事件重定向到id為forward的元素

document.getElementById("forward").fireEvent("onclick",event);

}

</script>

</body>Dom句柄特點：句柄之間互不影響，不會覆蓋可以減少多次修改AddEventListenter（事件，function）：添加事件句柄RemoveEventListenter（事件，function）：移除事件句柄；注意：加紅的function，后面不帶括號對象定義：javascript中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù)…也可以自定義對象。訪問對象的屬性：pertyname（對象名.屬性名）訪問對象的方法：objectname.methodname()（對象名.方法()）創(chuàng)建對象：直接創(chuàng)建對象：person=newobject（）；P=“miliy”;Person.age=44;Person.gender=”女”;Document.Write（”姓名：”+）;使用對象構(gòu)造器：functionperson（name，age，gender）{T=name;This.age=age;This.gender=gender;}Myfriend=newpersion(“andy”,12,”男”)；數(shù)字：只有一種數(shù)字類型，不定義不同類型的數(shù)字八進(jìn)制：數(shù)字的前綴是0，默認(rèn)是八進(jìn)制十六進(jìn)制：數(shù)字的前綴是0x，默認(rèn)為十六進(jìn)制對象方法：toString：把數(shù)字轉(zhuǎn)換為字符串；toLocalString：把數(shù)字轉(zhuǎn)換為字符串，使用本地數(shù)字格式順序toFixed：把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點后有指定位數(shù)toOrecision：把數(shù)字格式化為指定長度；valueOf：返回一個Number對象的基本數(shù)字值數(shù)組定義：var數(shù)組名=newArray（）；Var數(shù)組名=newArray（n）；Var數(shù)組名=newArray（元素1，元素2，元素3）；數(shù)組變量[i]=值；數(shù)組長度：數(shù)組名.length修改數(shù)組長度：數(shù)組名.length=4（你想定義的長度）；拼接數(shù)組concat（數(shù)組1，數(shù)組2，數(shù)組3,）；數(shù)組轉(zhuǎn)換成字符串：join（分隔符）；刪除數(shù)組最后一個元素，返回最后一個元素：pop（）；添加元素，返回數(shù)組元素：push（）；刪除第一個元素，返回第一個元素：shift（）從數(shù)組中選擇元素重新組建數(shù)組：slice（開始位置，結(jié)束位置）；刪除或者替換元素：splice（位置，多少，元素）；排序數(shù)組：sort（）；倒序數(shù)組：reverse（）；返回一個包含數(shù)組中所有元素的字符串，每個元素用逗號分隔：toString（）；字符串邏輯Math（算數(shù)）對象：Math.round（）:四舍五入Math.random（）：返回0-1之間的隨機數(shù)Math.floor（）：舍去小數(shù)點后的，向下取，不進(jìn)位Math.abs（x）：返回x的絕對值Math.acos（x）：返回x的余弦值Math.sqrt（x）：返回x的平方根Math.pow（x）:返回x的平方查找字符：charAt（位置）：字符串在指定位置處的字符indexOf（字符串，[起始位置]）：從字符串對象指定開始的位置，從前到后查找字符串lastIndexOf（字符串）：從后到前查找子字符串在字符串對象中的位置substring（開始位置，[長度]）：從開始位置開始截取指定長度的字符，返回截取的字符substring（開始位置，結(jié)束位置）；split（分隔符）：分割字符串到一個數(shù)組中去，把字符串變成數(shù)組replace（需要替代的字符，新的字符）；日期對象常用函數(shù)：Setxxx：設(shè)置日期和事件Getxxx：獲取日期和時間；Toxxx：將日期轉(zhuǎn)換成指定格式Date（）：返回當(dāng)前的日期和時間GetDate（）：從date對象中返回某個月中的某一天getDay（）：從date中返回一周中的某一天7getTime（）：獲取從到現(xiàn)在的毫秒數(shù)toTimeString：把date對象的時間轉(zhuǎn)換為字符串訪問時間對象：ClientX：返回發(fā)生鼠標(biāo)事件在頁面中的x坐標(biāo)ClientY：返回發(fā)生鼠標(biāo)事件在頁面中的Y坐標(biāo)OffsetX：返回發(fā)生鼠標(biāo)事件位置相對于事件源的x坐標(biāo)OffsetY：返回發(fā)生鼠標(biāo)事件位置相對于事件源的Y坐標(biāo)（RegExp）正則表達(dá)式：作用：用來檢索某個文本，使用一種模式來描述要減速的內(nèi)容定義：vara=newRegExp(“e”);在字符串中檢索的時候，尋找的是字符“e”方法：test（）：檢索字符串中的指定值，返回值是true或falseexec（）：檢索字符串中的指定值，返回的是被找到的值，如果沒有匹配到，返回null；compile（）：可以改變檢索模式，也可以添加或者刪除第二個參數(shù)canvas：語法：//獲得canvas區(qū)域

varcanvas=document.getElementById("diagonal");

//getContext

varcontext=canvas.getContext("2d");

//開始繪制

context.beginPath();

//起點位置MoveTo（x,y)

//終點位置lineTo(x,y)

context.moveTo(70,140);

context.lineTo(140,70);

//把這個線繪制到canvas上

context.stroke();繪制矩形：fillRect(x,y,width,height):矩形：（左上角x坐標(biāo)，左上角y坐標(biāo)，矩形寬度，矩形高度）繪制圓：arc（原點，原點，半徑，開始的弧度，定義畫圓的方向）fill（）：填充stroke（）：描邊<canvasid="mycanvas"width="200"height="200"style="border:1pxsolidblack">

</canvas>

<script>

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

ctx.fillStyle="pink";

ctx.beginPath();

ctx.arc(70,18,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

</script>繪制帶陰影的圖形<canvasid="mycanvas"width="200"height="200"style="border:1pxsolidblack">

</canvas>

<script>

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

//陰影x軸偏移

ctx.shadowOffsetX=15;

ctx.shadowOffsetY=15;

//模糊半徑

ctx.shadowBlur=10;

ctx.shadowColor="#ddd";

ctx.fillStyle="#00f";

ctx.fillRect(20,20,150,100);

//模糊顏色

</script>使用圖像：DrawImage（image，dx，dy）：接受一個圖片，并將其繪制到canvas中Dx：圖片左上角坐標(biāo)，dy圖片左上角y坐標(biāo)DrawImage（image，dx，dy，dw，dh）：接受一個圖片，將其縮放到寬度為dw，高度為dh，把圖片放在canvas中（da，dy）的位置DrawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）：接受一個范圍，通過（sx，sy，sw，sh）指定圖片裁剪的范圍，然后把裁剪過得圖片放到canvas的位置范圍中閉包如何從外部讀取局部變量（閉包）：在一個函數(shù)內(nèi)部，再定義一個函數(shù)：第一步：定義一個普通函數(shù)f1（）；第二步：在f1中定義一個普通函數(shù)f2（）；第三步：在f1中返回f2（在f1中返回f2的引用）第四步：執(zhí)行f1，把f1的返回結(jié)果復(fù)制給變量c；第五步：執(zhí)行c（）；函數(shù)A的內(nèi)部函數(shù)B被函數(shù)A以外的一個變量C引用Functionf1（）{Varn=99;Functionf2(){Alert(n);}Returnf2;}Varresult=f1();Result();//99外部可以訪問局部變量閉包：當(dāng)一個內(nèi)部函數(shù)被其他函數(shù)之外的變量引用的時候，就形成了閉包。閉包的特性：函數(shù)嵌套函數(shù)函數(shù)內(nèi)部可以引用外部的參數(shù)和變量參數(shù)和變量不會被垃圾回收機制回收閉包的用途：可以直接讀取函數(shù)內(nèi)部定義的變量讓這些變量的值始終存在內(nèi)存中注意：問題1：閉包會使函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗大，所以不能濫用，否則會導(dǎo)致網(wǎng)頁的性能問題，內(nèi)存泄漏解決方案：在退出函數(shù)的時候，將不使用的局部變量全部刪除問題2：閉包會在復(fù)函數(shù)外部，改變復(fù)函數(shù)內(nèi)部的變量值，如果把復(fù)函數(shù)當(dāng)做對象使用，把閉包當(dāng)做公用方法（public），內(nèi)部變量相當(dāng)于私有屬性（privatevalue）不嗯呢該隨便改變復(fù)函數(shù)內(nèi)部變量的值。JsonJavaScriptObjectNotation：對象表示法格式：{key：value}Json常用內(nèi)置類：array數(shù)組類/Date日期類/Function函數(shù)類/Math數(shù)學(xué)類/String字符串類/Object對象類/Number數(shù)值類/Error錯誤類Json內(nèi)置對象：它使用JavaScript對象的格式來存儲數(shù)據(jù)。JSON是靈活的，因為它允許

數(shù)據(jù)結(jié)構(gòu)

是

字符串，數(shù)字，布爾值，字符串，和

對象

的任意組合。對象與對象之間要用“，”隔開訪問對象屬性：正則表達(dá)式（RegExp）聲明表達(dá)式：vara=newRegExp（“hello”）；Vara2=/world/；查找字符串：/字符串/gi小寫的g：global（全局）查找全部小寫的i：忽略大小寫方法：Test（）：檢測會否存在，返回值為true/false；exec（）:檢索指定的值，返回值是被找到的值，如果沒有找到，返回null；字符串正則：match（）：匹配search（）：字符串查找replace（/換掉的字符/，“新字符”）：字符串替換split（）：分割字符串變成數(shù)組的時候經(jīng)常會用到數(shù)字選擇器：/\d/g獲取一個字符串的數(shù)字/\d+/g允許表達(dá)式匹配一個或者更多的數(shù)字單詞選擇器：/\w/g獲取一個字符串中的單詞Null字符查找：/\0/g空白選擇器：/\s/g查找字符串的空白這里的空白包括：""

(空格符)\r

(回車符)\n

(換行符)\t

(制表符)\f

(換頁符)正則表達(dá)式的字符大寫表示反義：例如：\S表示非空白字符方括號：[]/[abc]/g:對括號內(nèi)的內(nèi)容進(jìn)行查找如：/[1-9]/g:對1-9內(nèi)的數(shù)值進(jìn)行查找/[^abc]/h：對不在括號內(nèi)的字符進(jìn)行查找量詞：/n+/：匹配至少包含一個n字符串/n*/：匹配包含0個或者多個的n字符串/n?/:匹配包含0個或者一個n字符串/n{x}/：匹配包含連續(xù)x個的n字符串/n{x,y}/：匹配包含連續(xù)x個到連續(xù)y個的n字符串/n{x,}/:匹配至少含有x連續(xù)的n的字符串/n$/:匹配以n結(jié)尾的字符串/^n/:匹配以n開頭的字符串/字符1（?=字符2）/：匹配字符后面緊跟字符2/字符1（?!字符2）/：匹配字符后面沒有緊跟字符2DHTMLDHTML：動態(tài)HTML，JS：先獲取頁面的元素，修改屬性+htmlDOM：+css+html動態(tài)定位：pixelLeft：像素值pixelRight：旋轉(zhuǎn)：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

//弧度轉(zhuǎn)角度的公式：degree*Math.PI/180

ctx.rotate(20*Math.PI/180);

//繪制的長方形(x,y,width,height)

ctx.fillRect(50,20,100,50);

</script>縮放：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

ctx.strokeRect(5,5,25,15);

//scale(x方向倍數(shù)，y方向倍數(shù))

ctx.scale(2,2)//繪制的圖形距離畫布左上角2倍遠(yuǎn)的位置

ctx.strokeRect(5,5,25,15);

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

<script>

varcanvas=document.getElementById("canvas");

varctx=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,1,30,10);

ctx.fillStyle="blue";

ctx.fillRect(50,20,100,50);

</script>translate（）：重新映射畫布上（0,0）的位置translate（）之后調(diào)用fillRexc（）之類的方法會添加到x，y坐標(biāo)值上<body>

<canvasid="canvas"style="border:1pxsolidpink"width="500px"height="800px">

<script>

varcanvas=document.getElementById("canvas");

varctx=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>漸變：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

//填充效果

ctx.fillStyle=grd;

c