vip20190220js第四次課三目運(yùn)算符與或非堆棧傳值傳址if語(yǔ)句課程代碼js課件

第一章：javascript語(yǔ)法結(jié)構(gòu)21.1字符集21.2 區(qū)分大小寫(xiě)21.3注釋21.4 標(biāo)識(shí)符和保留字21.5 命名習(xí)慣3第二章：類型、值和變量42.1 數(shù)字42.2文本42.3 布爾類型52.4 null和undefined52.5 類型轉(zhuǎn)化62.6 變量作用域72.7 JS堆棧和拷貝8第三章：表達(dá)式和運(yùn)算符8第四章：語(yǔ)句9第五章：對(duì)象105.1 創(chuàng)建對(duì)象10第一章：javascript語(yǔ)法結(jié)構(gòu)1.1字符集Javascript是用unicode字符集編寫(xiě)的，unicode是ascii和latin-1的超集，并支持地球上幾乎所有在用的語(yǔ)言。1.2 區(qū)分大小寫(xiě)Js是區(qū)分大小寫(xiě)的。1.3注釋/ 單行注釋/* *多行注釋*/1.4 標(biāo)識(shí)符和保留字標(biāo)識(shí)符用來(lái)對(duì)變量和函數(shù)進(jìn)行命名，js標(biāo)識(shí)符必須是字母、下劃線或美元符開(kāi)頭，后續(xù)的字符可以是字母、數(shù)字、下劃線和美元符。保留字不能當(dāng)做標(biāo)識(shí)符或函數(shù)名。JavaScript 保留關(guān)鍵字JavaScript 對(duì)象、屬性和方法您也應(yīng)該避免使用 JavaScript 內(nèi)置的對(duì)象、屬性和方法的名稱作為 Javascript 的變量或函數(shù)名：HTML 事件句柄除此之外，您還應(yīng)該避免使用 HTML 事件句柄的名稱作為 Javascript 的變量及函數(shù)名。實(shí)例：1.5 命名習(xí)慣類型前綴例子數(shù)組aaArray布爾值bbMale浮點(diǎn)ffTax函數(shù)fnfnSwap整型iiAge對(duì)象ooCar正則rerePattern字符串ssUniversity第二章：類型、值和變量2.1 數(shù)字2.1.1 整型 2.1.2 浮點(diǎn)類型 3.14.33336.02e23 /6.02*1023 1.4732e-32 /1.4732*10-322.2文本2.2.1 單引號(hào)，雙引號(hào)在js程序中的字符串是由單引號(hào)或者雙引號(hào)括起來(lái)的字符序列，由單引號(hào)定界的字符串中可以包含雙引號(hào)，由雙引號(hào)定界的字符串中也可以包含單引號(hào)。 var s=tesing; var s=name=myfrom; var s=youre right, nit cantt be quote ;/換行輸出 則需要進(jìn)行轉(zhuǎn)義處理JavaScript轉(zhuǎn)義符轉(zhuǎn)義序列字符b退格f走紙換頁(yè)n換行r回車(chē)t橫向跳格 (Ctrl-I)單引號(hào)雙引號(hào)反斜杠2.2.2 字符串的使用（重點(diǎn)） var s=hello world; console.log(s.length);/獲取長(zhǎng)度 console.log(s.charAt(0);/ h 第一個(gè)字符 console.log(s.substring(1); console.log(s.substring(1,4);/ell 第24個(gè)字符 console.log(s.slice(1,4);/同上 console.log(s.slice(-3);/rld 最后三個(gè)字符 console.log(s.indexOf(l);/第一次出現(xiàn)的索引 console.log(s.lastIndexOf(l);/最后一次出現(xiàn)的索引 console.log(s.indexOf(l,3);/在位置3及之后首次出現(xiàn)字符l的位置 console.log(s.split(,);/變數(shù)組 console.log(s.toUpperCase();/變大寫(xiě) console.log(s.toLowerCase();/變小寫(xiě) console.log(s.replace(h,H);/替換 console.log(s0);/es5中，字符串可以當(dāng)做只讀數(shù)組 console.log(ss.length-1);2.3 布爾類型2.4 null和undefinedUndefined類型只有一個(gè)值，即undefined。當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined。Null類型也只有一個(gè)值，即null。null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。var oValue;alert(oValue = undefined); /output true這段代碼顯示為true,代表oVlaue的值即為undefined，因?yàn)槲覀儧](méi)有初始化它。alert(null = document.getElementById(notExistElement); 當(dāng)頁(yè)面上不存在id為notExistElement的DOM節(jié)點(diǎn)時(shí)，這段代碼顯示為true，因?yàn)槲覀儑L試獲取一個(gè)不存在的對(duì)象。 alert(typeof undefined); /output undefined alert(typeof null); /output object第一行代碼很容易理解，undefined的類型為Undefined；第二行代碼卻讓人疑惑，為什么null的類型又是Object了呢？其實(shí)這是JavaScript最初實(shí)現(xiàn)的一個(gè)錯(cuò)誤，后來(lái)被ECMAScript沿用下來(lái)。在今天我們可以解釋為，null即是一個(gè)不存在的對(duì)象的占位符，但是在實(shí)際編碼時(shí)還是要注意這一特性。alert(null = undefined); /output true ECMAScript認(rèn)為undefined是從null派生出來(lái)的，所以把它們定義為相等的。但是，如果在一些情況下，我們一定要區(qū)分這兩個(gè)值，那應(yīng)該怎么辦呢？可以使用下面的兩種方法。alert(null = undefined); /output false alert(typeof null = typeof undefined); /output false使用typeof方法在前面已經(jīng)講過(guò)，null與undefined的類型是不一樣的，所以輸出false。而=代表絕對(duì)等于，在這里null = undefined輸出false。+ 做運(yùn)算 做連接2.5 類型轉(zhuǎn)化值轉(zhuǎn)化為字符串.toString()數(shù)字Number()布爾Boolean()undefined報(bào)錯(cuò)NaNfalsenull“null”0Falsetrue“true”1false“false”0“”“”0false“1.2”(非空，數(shù)字)1.21.2true“one”(非空，非數(shù)字)oneNaNtrue0“0”0false-0“0”-0falseNaN“NaN”falseInfinity(存放無(wú)窮大的數(shù)值)Eg：var t1=1.7976931348623157E+10308document.write(t1) /結(jié)果Infinity“infinity”true- Infinity“-Infinity”true1“1”true (任意對(duì)象)true(任意數(shù)組)“”0truefunction()NaNtrue 2.6 JS堆棧和拷貝/chengguanhui/p/4737413.html第三章：表達(dá)式和運(yùn)算符名稱含義例子= = = = in左邊為字符串或可轉(zhuǎn)成字符串，右邊為一個(gè)對(duì)象，左邊的屬性存在于右邊對(duì)象，則返還okfunctionTest( ) varo=x:1,y:2;if(xino)/trueif(zino)/falseif(toStringino)/true,對(duì)象繼承了toString方法instanceof左側(cè)對(duì)象為右側(cè)類的實(shí)例，則返回truevard=newDate();if(dinstanceofDate)/true if(zinstanceofDate)/false&、 | 、 !+=、-=、*=、/=、%=?:typeofdeletefunctionTest( ) varo=x:1,y:2;deleteo.x;if(xino)/false第四章：語(yǔ)句名稱含義例子if/else if/elseswitch case break/continue/returnforwhiledo whilefor infunctionTest( ) varo=x:1,y:2;for(iino)console.log(oi);try.catch.finally functionTest( ) tryvarn=Number(prompt(請(qǐng)輸入一個(gè)正整數(shù));varf=factorial(n);alert(n+!=+f);catch(ex)alert(ex);finallyaler(不管是否有異常，都顯示)；functionfactorial(x) if(x1;x-)f*=x;returnf;withfunctionTest() / document.forms0.username.value = aa;/ document.forms0.pwd.value = aa;/ document.forms0.qq.value = aa;/ document.forms0.realname.value = aa;/ document.forms0.tel.value = aa;/簡(jiǎn)寫(xiě)方式with(document.forms0)username.value=aa;pwd.value=aa;qq.value=aa;tel.value=aa;realname.value=aa;第五章：系統(tǒng)對(duì)象5.1 系統(tǒng)對(duì)象本地對(duì)象（常用對(duì)象）：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error內(nèi)置對(duì)象（靜態(tài)對(duì)象）：Golobal、Math宿主對(duì)象（由瀏覽器提供的對(duì)象）DOM -documentBOM-window第五章：數(shù)組6.1 創(chuàng)建數(shù)組 var empty=; var primes=2,3,4,5,6; var a=new Array();/等同 var a=new Array(10);/規(guī)定了長(zhǎng)度 var a=new Array(2,3,4,5,6);/等同2,3,4,5,6 var a=1,2,3,4,6,7,8,34,3,2;/多維數(shù)組6.2 數(shù)組長(zhǎng)度length屬性6.3 數(shù)組元素刪除和添加 var a=; a.push(zero);/添加一個(gè),push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。 a.push(one,two);/添加兩個(gè) delete a1; one in a;/false alert(a.pop();/pop() 方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素。6.4 遍歷數(shù)組 var a=2,3,4,5,6,7,8,2; var iSum=0; /方式一 for(var i=0;ia.length;i+) iSum+=ai; /方式二 a.forEach(function(i) iSum+=i; );6.5 數(shù)組方法6.6 數(shù)組類型Array.isArray();/true6.7 作為數(shù)組的字符串var s=”test”;s.charAt(0);/“t”s1;/”e”第六章：window對(duì)象8.1 計(jì)時(shí)器setIntervalsetTimeout8.2 瀏覽器的定位和導(dǎo)航window.location顯示當(dāng)前頁(yè)面的url8.3 載入新的文檔8.4 瀏覽歷史 history.forward();/前進(jìn) history.back();/后退 history.go(-2);/相當(dāng)于單擊后退按鈕兩次 history.go(2);/相當(dāng)于單擊前進(jìn)按鈕1次8.5 對(duì)話框confirm alert prompt 8.6 打開(kāi)和關(guān)閉窗口第七章：腳本化文檔9.1 dom概述文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口。在網(wǎng)頁(yè)上，組織頁(yè)面（或文檔）的對(duì)象被組織在一個(gè)樹(shù)形結(jié)構(gòu)中，用來(lái)表示文檔中對(duì)象的標(biāo)準(zhǔn)模型就稱為DOM9.2 選取文檔元素 document.getElementById(d1);/通過(guò)id找 document.getElementsByName(a1);/通過(guò)name屬性找 document.getElementsByTagName(p)0;/通過(guò)標(biāo)簽來(lái)找 document.getElementsByClassName(c1);/通過(guò)class名稱來(lái)找9.3 文檔結(jié)構(gòu)和遍歷 document.getElementById(item1).parentNode; /返回父節(jié)點(diǎn) document.body.childNodes;/子節(jié)點(diǎn)集合 document.body.firstChild;/第一個(gè)子節(jié)點(diǎn) document.body.lastChild;/最后一個(gè)子節(jié)點(diǎn)，如果沒(méi)有子節(jié)點(diǎn)返回null document.getElementById(item1).nextSibling();/后面的那個(gè)兄弟節(jié)點(diǎn) document.getElementById(item1).previousSibling();/前面的那個(gè)兄弟節(jié)點(diǎn) document.getElementsByTagName(BUTTON)0.childNodes0.nodeValue;/nodeValue節(jié)點(diǎn)值 document.body.nodeName;/獲得 body 元素的節(jié)點(diǎn)名稱9.4 屬性9.5 元素的內(nèi)容innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTMLinnerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的HTML形式outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本 var innerHTML = document.getElementById(mydiv).innerHTML; var innerText = document.getElementById(mydiv).innerText; /Firefox不支持 var outerHTML = document.getElementById(mydiv).outerHTML; var outerText = document.getElementById(mydiv).outerText; /Firefox不支持 (innerHTML); /輸出span1 span2 (innerText); /輸出span1 span2 (outerHTML); /輸出span1span2 (outerText); /輸出span1 span2PS: innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText對(duì)Firefox是不支持的，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例：(document.getElementById(mydiv).innerHTML.replace(/gim,); 9.6 創(chuàng)建、插入和刪除節(jié)點(diǎn)9.6.1 創(chuàng)建節(jié)點(diǎn)var newnode=document.createTextNode(hello world);9.6.2 插入節(jié)點(diǎn)9.6.3 刪除和替換節(jié)點(diǎn)window.onload = function () var oInp = document.getElementById(inp); var oBtn = document.getElementById(btn); var oUl1 = document.getElementById(ul1); var oP = document.getElementById(p1); var oBtn1 = document.getElementById(btn1); var oDiv = document.getElementById(div1); oBtn.onclick = function () var oLi = document.createElement(li); /動(dòng)態(tài)創(chuàng)建li元素 oLi.innerHTML = oInp.value; /oUl1.appendChild(oLi); / 追加子元素 /在指定的元素之前插入新元素 if (oUl1.children0) /兼容IE oUl1.insertBefore(oLi, oUl1.children0); else oUl1.appendChild(oLi) var oA = document.createElement(a); oA.innerHTML = 刪除; oA.href = javascript:; oA.onclick = function () oUl1.removeChild(this.parentNode); /刪除節(jié)點(diǎn) 只能在父級(jí)下進(jìn)行操作 oLi.appendChild(oA); oBtn1.onclick = function () / document.body.replaceChild(oP,oDiv); /p標(biāo)簽替換div oDiv.appendChild(oP); / 也可以操作已有的節(jié)點(diǎn) 把p標(biāo)簽添加到div里面 我是P標(biāo)簽 替換 我是div第八章：Canvas 10.1 創(chuàng)建畫(huà)圖環(huán)境、畫(huà)矩形、劃線 window.onload = function () var oC = document.getElementById(c1); var oGC = oC.getContext(2d);/繪圖環(huán)境 /demo1：繪制實(shí)心方塊，left/top/width/height 默認(rèn)是黑色 /oGC.fillRect(100,50,200,100); /demo2：帶邊框的空心方塊，邊框默認(rèn)為2px，要讓它默認(rèn)為1px，left,top多加0.5 /oGC.strokeRect(100,50,200,100); /demo3：oGC.fillStyle=#f00;/填充顏色 /oGC.fillRect(100,50,200,100); / oGC.strokeStyle=#00f; / oGC.lineWidth=10; / oGC.strokeRect(100,50,200,100); /demo4：邊界繪制 /oGC.lineJoin = round;/圓角 / oGC.lineJoin = bevel;/斜角 / oGC.lineWidth=10; / oGC.strokeRect(100,50,200,100); /demo5：繪制路徑 / oGC.beginPath(); / oGC.moveTo(100,100); / oGC.lineTo(200,200); / oGC.lineTo(300,200); / oGC.closePath();/閉合 / oGC.stroke();/默認(rèn)是黑色的 / oGC.beginPath(); / oGC.moveTo(300, 300); / oGC.lineTo(200, 200); / oGC.lineTo(300, 200); / oGC.closePath();/閉合 / oGC.fill();/填充 /demo6：繪制矩形 / oGC.rect(20, 20, 150, 100); /oGC.fill();/填充 / oGC.stroke();/畫(huà)邊框 / oGC.clearRect(0,0,oC.width,oC.height);/清除 /demo7：保存狀態(tài) /沒(méi)有save和restore那么oGC.fillStyle = red;對(duì)兩個(gè)都有作用，有了后，只對(duì)第一個(gè)有作用，第二個(gè)沒(méi)有作用 / oGC.save();/保存路徑 / oGC.fillStyle = red; / oGC.beginPath(); / oGC.moveTo(100, 100); / oGC.lineTo(200, 200); / oGC.lineTo(300, 200); / oGC.closePath(); / oGC.fill(); / oGC.restore();/恢復(fù)路徑 / oGC.beginPath(); / oGC.moveTo(300, 300); / oGC.lineTo(400, 400); / oGC.lineTo(500, 600); / oGC.closePath(); / oGC.fill(); /demo8：端點(diǎn)樣式 / oGC.lineWidth=20; / oGC.lineCap=round;/圓角，如果設(shè)置為square則高度多出為寬一半的值 / oGC.moveTo(100,100); / oGC.lineTo(200,200); / oGC.stroke(); 10.2 畫(huà)圓 var oC = document.getElementById(c1); var oGC = oC.getContext(2d);/繪圖環(huán)境 /demo1：繪制圓形 /oGC.moveTo(200,200); /參數(shù)：x,y起始位置，半徑，起始弧度（角度*Math.PI/180）, 旋轉(zhuǎn)方向 / oGC.arc(200,200,150,0,90*Math.PI/180,false);/0度在圓的最右邊，最上面為-90度，最下面為正90度 / oGC.stroke(); /demo2：畫(huà)鐘表 function toDraw() var oDate = new Date(); var oHours = oDate.getHours(); var oMin = oDate.getMinutes(); var oSen = oDate.getSeconds(); var oHoursValue = (-90 + oHours * 30 + oMin / 2) * Math.PI / 180; var oMinValue = (-90 + oMin * 6) * Math.PI / 180; var oSenValue = (-90 + oSen * 6) * Math.PI / 180; var x = 200; var y = 200; var r = 150; oGC.clearRect(0, 0, oC.width, oC.height); oGC.moveTo(x, y); oGC.arc(x, y, r, 0, 6 * Math.PI / 180, false); oGC.beginPath(); for (var i = 0; i 60; i+) oGC.moveTo(x, y); oGC.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false); oGC.closePath(); oGC.stroke(); oGC.fillStyle = #fff; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false); oGC.closePath(); oGC.fill(); oGC.lineWidth = 3; oGC.beginPath(); for (var i = 0; i 12; i+) oGC.moveTo(x, y); oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false); oGC.closePath(); oGC.stroke(); oGC.fillStyle = #fff; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false); oGC.closePath(); oGC.fill(); oGC.lineWidth = 5; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 8 / 20, oHoursValue, oHoursValue, false); oGC.closePath(); oGC.stroke(); oGC.lineWidth = 3; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 13 / 20, oMinValue, oMinValue, false); oGC.closePath(); oGC.stroke(); oGC.lineWidth = 1; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 17 / 20, oSenValue, oSenValue, false); oGC.closePath(); oGC.stroke(); setInterval(toDraw, 1000); toDraw();10.3 顏色、樣式、陰影、漸變window.onload = function () var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);/demo1：填充矩形/ctx.fillStyle = #0f0;/ctx.fillRect(20, 20, 100, 100);/demo2：矩形框/ctx.strokeStyle = #0000ff;/ctx.strokeRect(20, 20, 150, 100);/demo3 陰影/ctx.shadowBlur = 20;/模糊級(jí)數(shù)是 20/ctx.shadowOffsetX = 20;/帶有向右偏移 20 像素的陰影/ctx.shadowOffsetY = 20;/帶有向下偏移 20 像素的陰影/ctx.shadowColor = black;/ctx.fillStyle = blue;/ctx.fillRect(20, 20, 100, 80);/demo4：線性漸變/var grd = ctx.createLinearGradient(0, 0, 170, 0);/漸變開(kāi)始點(diǎn)的 x 坐標(biāo)，漸變開(kāi)始點(diǎn)的 y 坐標(biāo)，漸變結(jié)束點(diǎn)的 x 坐標(biāo)，漸變結(jié)束點(diǎn)的 y 坐標(biāo)/grd.addColorStop(0, black);/grd.addColorStop(0.5, red);/grd.addColorStop(1, white);/ctx.fillStyle = grd;/ctx.fillRect(20, 20, 150, 100);/demo5：圖片重復(fù)/var img = document.getElementById(lamp);/var pat = ctx.createPattern(img, repeat);/repeat默認(rèn)，repeat-x，repeat-y，no-repeat/ctx.rect(0, 0, 150, 100);/ctx.fillStyle = pat;/ctx.fill();/demo6：徑向漸變/var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);/漸變的開(kāi)始圓的 x 坐標(biāo),漸變的開(kāi)始圓的 y 坐標(biāo),開(kāi)始圓的半徑,漸變的結(jié)束圓的 x 坐標(biāo),漸變的結(jié)束圓的 y 坐標(biāo),結(jié)束圓的半徑/grd.addColorStop(0, red);/grd.addColorStop(1, white);/ctx.fillStyle = grd;/ctx.fillRect(10, 10, 150, 100);10.4 路徑方法var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);/demo1：剪切/ctx.rect(50, 20, 200, 120);/ctx.stroke();/ctx.clip();/ 在 clip() 之后繪制綠色矩形/ctx.fillStyle = green;/ctx.fillRect(0, 0, 150, 100);/demo2：繪制一條二次貝塞爾曲線var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.moveTo(20, 20);ctx.quadraticCurveTo(20, 100, 200, 20);/貝塞爾控制點(diǎn)的 x 坐標(biāo),貝塞爾控制點(diǎn)的 y 坐標(biāo),結(jié)束點(diǎn)的 x 坐標(biāo),結(jié)束點(diǎn)的 y 坐標(biāo)ctx.stroke();/demo3：繪制一條三次貝塞爾曲線var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.moveTo(20, 20);ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);/第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo),第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo),第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo),第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo),結(jié)束點(diǎn)的 x 坐標(biāo),結(jié)束點(diǎn)的 y 坐標(biāo)ctx.stroke();/在畫(huà)布上創(chuàng)建介于兩個(gè)切線之間的?。簐ar c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.beginPath();ctx.moveTo(20, 20); / 創(chuàng)建開(kāi)始點(diǎn)ctx.lineTo(100, 20); / 創(chuàng)建水平線ctx.arcTo(150, 20, 150, 70, 50); / 創(chuàng)建弧, 弧的起點(diǎn)的 x 坐標(biāo), 弧的起點(diǎn)的 y 坐標(biāo), 弧的終點(diǎn)的 x 坐標(biāo), 弧的終點(diǎn)的 y 坐標(biāo), 弧的半徑ctx.lineTo(150, 120); / 創(chuàng)建垂直線ctx.stroke(); / 進(jìn)行繪制/繪制一個(gè)矩形，如果點(diǎn) 20,50 位于當(dāng)前路徑中：var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.rect(20, 20, 150, 100);if (ctx.isPointInPath(20, 50) ctx.stroke();10.5 轉(zhuǎn)換 var c = document.getElementById(myCanvas); var ctx = c.getContext(2d); /demo1：放大或者縮小 /ctx.strokeRect(5, 5, 25, 15); /ctx.scale(2, 2);/繪制矩形，放大到 200%，然后再次繪制矩形 /ctx.strokeRect(5, 5, 25, 15); /demo2：旋轉(zhuǎn) /ctx.rotate(20 * Math.PI / 180);/旋轉(zhuǎn)角度，以弧度計(jì),如需將角度轉(zhuǎn)換為弧度，請(qǐng)使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算。 /ctx.fillRect(50, 20, 100, 50); /demo3：位移 /ctx.fillRect(10, 10, 100, 50); /ctx.translate(70, 70);/添加到水平坐標(biāo)（x）上的值,添加到垂直坐標(biāo)（y）上的值 /ctx.fillRect(10, 10, 100, 50); /demo4：替換繪圖的當(dāng)前轉(zhuǎn)換矩陣 ctx.fillStyle = yellow; ctx.fillRect(0, 0, 250, 100) ctx.transform(1, 0.5, -0.5, 1, 30, 10);/transform() 允許縮放、旋轉(zhuǎn)、移動(dòng)并傾斜當(dāng)前的環(huán)境。 /水平縮放繪圖,水平傾斜繪圖,垂直傾斜繪圖,垂直縮放繪圖,水平移動(dòng)繪圖,垂直移動(dòng)繪圖 ctx.fillStyle = red; ctx.fillRect(0, 0, 250, 100); ctx.tr