第一家公司：

上海莘亮網路科技有限公司

問題：1資料內嵌瞭解多少

            2.熟悉php框架thinkcmf

            3.商城站的資料一般不用本地儲存做，正式做專案還是用ajax

第二家公司  

上海寶朔科技有限公司

       第一部分：

        筆試：

            1.es6,css3,html5有哪些新特性

            2.什麼是模組化。對三大框架的瞭解

            3.寫一個閉包的例子，並說明閉包的好處

            4.前端如何保證效能

            5.如何保證網站的安全

            6.編寫一個隨機函式，要求返回["a","b","c","d","e"]中的其中一個，他們對應的概率分別為[10,20,15,40,15]

                

            7.編寫一個javascript函式fn，該函式有一個引數n數字型別，其返回值是一個數組，該陣列內是n個隨機且不重複的整數，且整數取值範圍是[2,32]

口試：1.vue兩個頁面間值的傳遞通過什麼可以實現。

詳解vuejs幾種不同元件（頁面）間傳值的方式

作者：ygtq
本篇文章主要介紹了詳解vuejs幾種不同元件（頁面）間傳值的方式，具有一定的參考價值，有興趣的可以瞭解一下
在應用複雜時，推薦使用vue官網推薦的vuex，以下討論簡單SPA中的元件間傳值。
一、路由傳值
路由物件如下圖所示：
在跳轉頁面的時候，在js程式碼中的操作如下，在標籤中使用<router-link>標籤
this.$router.push({


            name: 'routePage',


            query/params: {


              routeParams: params


            }


          }) 
需要注意的是，實用params去傳值的時候，在頁面重新整理時，引數會消失，用query則不會有這個問題。
這樣使用起來很方便，但url會變得很長，而且如果不是使用路由跳轉的介面無法使用。
二、通過$parent,$chlidren等方法調取用層級關係的元件內的資料和方法
通過下面的方法呼叫：
this.$parent.$data.id //獲取父元素data中的id


this.$children.$data.id //獲取父元素data中的id 
這樣用起來比較靈活，但是容易造成程式碼耦合性太強，導致維護困難
三、通過eventBus傳遞資料
使用前可以在全域性定義一個eventBus
window.eventBus = new Vue(); 
在需要傳遞引數的元件中，定義一個emit傳送需要傳遞的值，鍵名可以自己定義（可以為物件）
eventBus.$emit('eventBusName', id); 
在需要接受引數的元件重，用on接受該值（或物件）
//val即為傳遞過來的值


eventBus.$on('eventBusName', function(val) {console.log(val)}) 
最後記住要在beforeDestroy()中關閉這個eventBus

eventBus.$off('eventBusName'); 

2.var a=="1"&&a=="2"&&a=="3"   在a為什麼的時候才為真

const a = {
  i: 1,
  toString() {
    return this.i++;
  }
}
if(a == 1 && a == 2 && a == 3) {
  console.log('Hello World!');
}
// 結果: 頁面彈出 " Hello World! "

3，你寫過的動畫方式有哪些？       例項：三角形的製作，兩種方法 

第一種：利用html+css來實現：div給id="demo"

   

第二種：通過css3動畫控制邊框來做三角形。

    

 你覺得哪些專案適合vue框架？

答：1、資料資訊量比較多的，反之類似企業網站就無需此框架了。
2、手機web和app應用多端共用一套介面的專案，因為使用vue.cli+webpack後的前端目錄，非常有利於專案的跨平臺部署。


mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：一個model+view+viewModel框架，資料模型model，viewModel連線兩個

區別：vue資料驅動，通過資料來顯示檢視層而不是節點操作。

場景：資料操作比較多的場景，更加便捷


怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態引數？ 
答：在router目錄下的index.js檔案中，對path屬性加上/:id。  使用router物件的params.id

eval是做什麼的
eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。屬於內建函式

    eg:>>> eval('pow(2,2)')4>>> eval('2 + 2')4>>> eval("n + 4")85

        將字串轉成相應的物件（如list、tuple、dict和string之間的轉換）

>>> a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]"
>>> b = eval(a)

缺點是：安全性是其最大的缺點。box-sizing的屬性有哪些，分別有什麼作用。
    

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內，其實就是怪異模式了。

eg：左右模組寬度為50%，加個邊框會掉下去，加一個這個樣式就能解決
web應用從伺服器主動推送date到客戶端有哪些方式？

    WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。WebSocket通訊協議於2011年被IETF定為標準RFC 6455，WebSocketAPI被W3C定為標準。在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

    Comet的方式比較適合，也有相應的實現框架，實現成本最低


css有哪些屬性，哪些可以繼承

不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可繼承：visibility和cursor。內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。終端塊狀元素可繼承：text-indent和text-align。列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。表格元素可繼承：border-collapse。

js冒泡和捕獲的區別，如何阻止冒泡和捕獲事件？

事件冒泡是一個從子節點向祖先節點冒泡的過程；

事件捕獲剛好相反，是從祖先節點到子節點的過程。

阻止事件冒泡方法：

法1：當前點選事件中return false;

         $('#clickMe').click(function(){
alert('hello');

                               return false;
});

法2：$('#clickMe').click(function(event){
alert('hello');

                                var e = window.event || event;

if ( e.stopPropagation ){ //如果提供了事件物件，則這是一個非IE瀏覽器
  e.stopPropagation();
}else{
        //相容IE的方式來取消事件冒泡
  window.event.cancelBubble = true;
}
});

session,cookie,sessionStorage,localStorage的區別。

一、cookie和session

cookie和session都是用來跟蹤瀏覽器使用者身份的會話方式。

區別：

1、保持狀態：cookie儲存在瀏覽器端，session儲存在伺服器端

2、使用方式：

（1）cookie機制：如果不在瀏覽器中設定過期時間，cookie被儲存在記憶體中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱會話cookie。如果在瀏覽器中設定了cookie的過期時間，cookie被儲存在硬碟中，關閉瀏覽器後，cookie資料仍然存在，直到過期時間結束才消失。

     Cookie是伺服器發給客戶端的特殊資訊，cookie是以文字的方式儲存在客戶端，每次請求時都帶上它

（2）session機制：當伺服器收到請求需要建立session物件時，首先會檢查客戶端請求中是否包含sessionid。如果有sessionid，伺服器將根據該id返回對應session物件。如果客戶端請求中沒有sessionid，伺服器會建立新的session物件，並把sessionid在本次響應中返回給客戶端。通常使用cookie方式儲存sessionid到客戶端，在互動中瀏覽器按照規則將sessionid傳送給伺服器。如果使用者禁用cookie，則要使用URL重寫，可以通過response.encodeURL(url) 進行實現；API對encodeURL的結束為，當瀏覽器支援Cookie時，url不做任何處理；當瀏覽器不支援Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。

3、儲存內容：cookie只能儲存字串型別，以文字的方式；session通過類似與Hashtable的資料結構來儲存，能支援任何型別的物件(session中可含有多個物件)

4、儲存的大小：cookie：單個cookie儲存的資料不能超過4kb；session大小沒有限制。

5、安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。

　　　　　　原因如下：（1）sessionID儲存在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登入，或者啟動session_start才會有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次啟動session_start後，前一次的sessionID就是失效了，session過期後，sessionID也隨之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）綜上所述，攻擊者必須在短時間內攻破加密的sessionID，這很難。

6、應用場景：

cookie：（1）判斷使用者是否登陸過網站，以便下次登入時能夠實現自動登入（或者記住密碼）。如果我們刪除cookie，則每次登入必須從新填寫登入的相關資訊。

　　　　（2）儲存上次登入的時間等資訊。

　　　　（3）儲存上次檢視的頁面

　　　　（4）瀏覽計數

session：Session用於儲存每個使用者的專用資訊，變數的值儲存在伺服器端，通過SessionID來區分不同的客戶。

　　（1）網上商城中的購物車

　　（2）儲存使用者登入資訊

　　（3）將某些資料放入session中，供同一使用者的不同頁面使用

　　（4）防止使用者非法登入

 7、缺點：cookie：（1）大小受限

　　　　　　　　（2）使用者可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性較低

　　　　　　　　（4）有些狀態不可能儲存在客戶端。

　　　　　　　　（5）每次訪問都要傳送cookie給伺服器，浪費頻寬。

　　　　　　　　（6）cookie資料有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

 　　　　session：（1）Session儲存的東西越多，就越佔用伺服器記憶體，對於使用者線上人數較多的網站，伺服器的記憶體壓力會比較大。

　　　　　　　　（2）依賴於cookie（sessionID儲存在cookie），如果禁用cookie，則要使用URL重寫，不安全

　　　　　　　　（3）建立Session變數有很大的隨意性，可隨時呼叫，不需要開發者做精確地處理，所以，過度使用session變數將會導致程式碼不可讀而且不好維護。

     cookie在瀏覽器和伺服器間來回傳遞。 

WebStorage兩個主要目標：（1）提供一種在cookie之外儲存會話資料的路徑。（2）提供一種儲存大量可以跨會話存在的資料的機制。

HTML5的WebStorage提供了兩種API：localStorage（本地儲存）和sessionStorage（會話儲存）。

1、生命週期：localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器之後localStorage中的資料也不會消失。localStorage除非主動刪除資料，否則資料永遠不會消失。

　　　　　　  sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器視窗”的概念，sessionStorage是在同源的視窗中始終存在的資料。只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或者進入同源另一個頁面，資料依然存在。但是sessionStorage在關閉了瀏覽器視窗後就會被銷燬。同時獨立的開啟同一個視窗同一個頁面，sessionStorage也是不一樣的。

2、儲存大小：localStorage和sessionStorage的儲存資料大小一般都是：5MB

3、儲存位置：localStorage和sessionStorage都儲存在客戶端，不與伺服器進行互動通訊。

4、儲存內容型別：localStorage和sessionStorage只能儲存字串型別，對於複雜的物件可以使用ECMAScript提供的JSON物件的stringify和parse來處理

5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、應用場景：localStoragese：常用於長期登入（+判斷使用者是否已登入），適合長期儲存在本地的資料。sessionStorage：敏感賬號一次性登入；

WebStorage的優點：

（1）儲存空間更大：cookie為4KB，而WebStorage是5MB；

（2）節省網路流量：WebStorage不會傳送到伺服器，儲存在本地的資料可以直接獲取，也不會像cookie一樣美詞請求都會傳送到伺服器，所以減少了客戶端和伺服器端的互動，節省了網路流量；

（3）對於那種只需要在使用者瀏覽一組頁面期間儲存而關閉瀏覽器後就可以丟棄的資料，sessionStorage會非常方便；

（4）快速顯示：有的資料儲存在WebStorage上，再加上瀏覽器本身的快取。獲取資料時可以從本地獲取會比從伺服器端獲取快得多，所以速度更快；

（5）安全性：WebStorage不會隨著HTTP header傳送到伺服器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在偽造問題；

（6）WebStorage提供了一些方法，資料操作比cookie方便；

　　　　setItem (key, value) ——  儲存資料，以鍵值對的方式儲存資訊。

      　　 getItem (key) ——  獲取資料，將鍵值傳入，即可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的資訊。

        　　clear () ——  刪除所有的資料

        　　key (index) —— 獲取某個索引的key

essionStorage和localStorage不會     sessionStorage和localStorage的儲存空間更大；

    



陣列和字串的擷取方法及用法？

字串：

slice()、substr()、substring()

這三個方法都會返回被操作字串的一個子字串。可以接收兩個引數，用來表示子字串的開始位置和結束位置。

slice()和substring()第二個引數指定的是子字串最後一個字元後面的位置，也就是擷取的子字串中不包含該位置的字元。
substr()第二個引數指定的是子字串的長度。

如果給的引數是負數：
slice() 會將傳入的負值與字串的長度相加；
substr() 會將負的第一個引數加上字串的長度，而將第二個負的引數轉換為0；
substring() 會將所有的負值引數都轉換為0。會自動將小的引數作為開始位置，大的引數作為結束位置。
angular，react和vue的區別？

陣列

（2）slice()

從當前陣列中擷取一到多個項建立一個新陣列。接收一或兩個引數，即要返回項的起始和結束位置，但不包括結束位置的項。如果只有一個引數，則是從起始位置到陣列末尾的所有項。

如果slice()的引數中有一個是負數，則用陣列的長度加上該數來確定相應的位置。如果結束位置小於起始位置，則返回空陣列。

（3）splice()
splice()方法可以對陣列項進行刪除、替換、插入操作。
刪除：需要指定2個引數，要刪除的第一項的位置和要刪除的項數。如splice(1, 2);
插入：需要指定3個引數，起始位置、0（要刪除的項數）和要插入的項。如果要插入多個項，可以繼續傳入第4、第5、...、第n個項。
替換：需要指定3個引數，起始位置、要刪除的項數和要插入的任意數量的項。可以向指定位置插入任意數量的項，且同時刪除任意數量的項。

splice()方法始終會返回一個數組，該陣列包含從原始陣列中刪除的項，如果沒有刪除的項，則返回一個空陣列。

position有哪些值，分別基於什麼定位？

position定位有一個預設的屬性值：static。但是它常用的屬性還是以下3個：relative、fixed、absolute。

relative：

如果僅僅是像這樣：position:relative; 那麼它的表現是和static一樣的。需要加top、right、bottom、left來使其偏離正常位置。注意：relative不會使元素脫離文件流，也就是其他的元素不會調整位置來彌補它偏離後剩下的空隙。

fixed：

fixed是相對於瀏覽器可視視窗來定位的，即使是頁面滾動，fixed定位的元素還是會停留在原來的位置。注意：fixed會使元素脫離文件流，也就是其他元素會填充它偏離後在頁面中原本位置的空隙。

absolute：

absolute是相對於它最近的已定位的祖先元素，如果沒有，那麼它就是相對於body元素定位。注意：absolute會使元素脫離文件流。

怎麼對JSON物件進行深拷貝？

解決的辦法有：

1.用jquery的extend方法，把物件合併到新的物件去，會返回一個深層次的副本。 
2.使用JSON的序列化，var b = JSON.stringify(a); 在反序列化：JSON.parse(b);

//這個函式可以深拷貝 物件和陣列
var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化物件
        newobj = JSON.parse(str); //還原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

寫一個方法對下面的陣列進行排序去重。arr=['1','5','1','2','10','32','34']

注意的是：先去重，然後排序

利用物件對陣列進行去重排序

原創 2018年03月07日 20:28:32

• 65

var arr = [1,5,8,4,3,8,7,1,6,2]
var obj = {}
for(let i = 0; i < arr.length; i++)
{
obj[arr[i]] = arr[i]
}

Object.values(obj)

    去重的想法是將陣列中的值作為物件的屬性，因為屬性值不可以重複，所以當設定重複的屬性後後將之前設定的屬性值覆蓋，然後利用Object將物件中的值拿出來，系統會預設從小到大的方式排序。

vue中資料是如何繫結的，v-if v-show的區別，除此以外寫出至少3中指令及其用法。

資料繫結，v-bind, v-model(修飾符)

修飾符

• .lazy：新增該修飾符，從而轉變為在 change 事件中同步，而非input事件！請檢視： change和input區別
• .number：將使用者的輸入值轉為 Number 型別
• .trim：自動過濾使用者輸入的首尾空格

    

v-if 控制顯隱方式 
v-if 是惰性的，如果初始渲染的條件為假，那麼什麼事情都不做，在第一次變為真的時候才開始區域性渲染。這就導致當條件為假的時候在條件塊裡面的子元件不會被渲染，而且時間監聽器也不會生效。當條件切換時會有銷燬、重建的過程，所以說，v-if才是真正的條件渲染

二、v-show控制顯隱方式 
v-show其實是通過控制節點css屬性中的display：none與否來控制是否顯示。所以v-show無論條件真假都會進行編譯並且保留編譯，只是簡單基於css切換

總結： 
1、根據對比可知，v-if有更高的切換消耗，v-show有更高的初始渲染消耗。因此，如果需要頻繁切換就採用v-show，如果執行條件不太可能改變，就採用v-if 
2、v-if與v-else搭配，v-show也可以使用取反來模擬

v-on,v-for,v-else

使用過element.ui嗎，說下其中兩個元件的使用方法？

elementUI select元件使用詳解

• 動態生成option選項
• option選項繫結對應的文字值和value值
• 作為表單專案，新增、編輯功能
• 對選項改變後觸發相關事件

請詳細說下你對vue生命週期的理解？








1、是否在開發過程中封裝過元件？如有封裝，簡單介紹下。分頁元件會如何設計

2、js有多少種繼承

3、jsonp的實現原理(axiso) 

    script

    url='https://ww.baidu.com/index.php?a=1&b=2&callback=fn'

    回撥函式
    function fn(data){
        console.log(data);
    }
    axiso.get().then()




4、(a) => (b) => { return a +b; } 是指？
    閉包
    function aa(a){
        function bb(b){
            return a+b;
        }
    }
5、上傳的實現原理

    input:file   url    fileReader物件


function readAsText(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //將檔案以文字形式讀入頁面
    reader.readAsText(file);
    reader.onload=function(f){
        var result=document.getElementById("result");
        //顯示檔案
        result.innerHTML=this.result;
    }

}

畫布方面的知識

 課程內容

3.1.Canvas 進階

3.1.1.canvas 回顧

什麼是canvas 元素？作用是什麼？

在HTML5中，Canvas元素用於在網頁上繪製圖形，該元素強大之處在於可以直接在HTML上進行圖形操作，具有極大的應用價值。

canvas 元素使用指令碼JavaScript 在網頁上繪製圖像。

canvas 元素是一個畫布，而畫布是一個矩形區域，可以控制其每一畫素。

canvas 元素擁有繪製路徑、矩形、圓形、字元以及新增影象的方法，可以建立豐富的圖形引用。

eg:

<canvas id="canvas" width="800" height="600" style="border:1px solid #000;"></canvas>

使用canvas 繪製圖形

在繪製圖形之前，首先建立一個畫布,獲取上下文

程式碼如下:

<canvas id="canvas" width="800" height="600" style="border:1px solid #000;"></canvas>

<script>

window.onload = function(){

var canvas = document.getElementById('canvas').getContext('2d');

}

</script>

繪製直線

繪製直線

moveTo(x,y);

lineTo(x,y);

strokeStyle = "black"

stroke();

程式碼：

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.moveTo(50,50);

cxt.lineTo(750,550);

cxt.strokeStyle = "black";

cxt.stroke();

</script>

ctx.lineWidth ：

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.moveTo(0,0);

10

cxt.lineTo(350,150);

cxt.lineWidth = 5;

cxt.strokeStyle = "black";

cxt.stroke();

</script>

繪製矩形

繪製矩形

cxt.fillRect(x,y,width,height)

x:左上角的x軸座標

y:左上角的y軸座標

width：矩形寬度

height：矩形高度

線條繪製矩形

繪製矩形

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.moveTo(50,50);

cxt.lineTo(200,50);

cxt.lineTo(200,200);

cxt.lineTo(50,200);

cxt.lineTo(50,50);

cxt.strokeStyle = "black";

cxt.stroke();

</script>

11

填充繪製矩形

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.moveTo(50,50);

cxt.lineTo(200,50);

cxt.lineTo(200,200);

cxt.lineTo(50,200);

cxt.lineTo(50,50);

cxt.fillStyle = "black";

cxt.fill();

</script>

給填充繪製的矩形加邊框

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.moveTo(50,50);

cxt.lineTo(200,50);

cxt.lineTo(200,200);

cxt.lineTo(50,200);

cxt.lineTo(50,50);

cxt.lineWidth = 5;

cxt.strokeStyle = "red";

12

cxt.fillStyle = "black";

cxt.stroke();

cxt.fill();

</script>

3.1.2.canvas 高階內容（一）

繪製圓形

繪製圓形

cxt.arc(x,y,r,stratAngle,endAngle,counterclockwise);

x:圓心的x座標

y:圓心的y座標

r:圓的半徑

startAngle:起始角，以弧度記（時鐘的3點鐘方向位置），開始為0

endAngle:結束角，以弧度記

counterclockwise:有兩個值，一個是true  為逆時針，一個是false  為順時針，預設值為false

，想要順時針的話，可以不填

繪製弧線

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.arc(200,200,100,0,0.5*Math.PI);

cxt.lineWidth = 5;

cxt.strokeStyle = "block"

cxt.stroke();

</script>

13

繪製圓

線條圓

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.arc(200,200,100,0,Math.PI*2);

cxt.strokeStyle = "block"

cxt.stroke();

</script>

填充圓

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.arc(200,200,100,0,Math.PI*2);

cxt.fillStyle = "block"

cxt.fill();

</script>

14

路徑繪製圖形

beginPath();//丟棄任何當前定義的路徑並且開始一條新的路徑。它把當前的點設定為 (0,0)。

closePath();//如果畫布的子路徑是開啟的，closePath()

通過新增一條線條連線當前點和子路徑起始點來關閉它。如果子路徑已經閉合了，這個方法不做任何事

情。

沒有beginPath()的情況下

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.fillStyle = "block"

cxt.arc(200,200,100,0,Math.PI*2);

cxt.fill();

cxt.fillStyle = "blueviolet"

cxt.arc(300,300,50,0,Math.PI*2);

cxt.fill();

</script>

15

有beginPath()的情況下：

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.fillStyle = "block"

cxt.arc(200,200,200,0,Math.PI*2);

cxt.fill();

cxt.beginPath();

cxt.fillStyle = "red"

cxt.arc(400,400,100,0,Math.PI*2);

cxt.fill();

</script>

16

繪製多邊形

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.strokeStyle = "block"

cxt.beginPath()

cxt.moveTo(100,100)

cxt.lineTo(400,200)

cxt.lineTo(300,300)

cxt.lineTo(140,200)

cxt.closePath();

cxt.stroke();

</script>

繪製弧線

<script>

var canvas = document.getElementById('canvas')

var cxt = canvas.getContext('2d');

cxt.strokeStyle = "block"

cxt.beginPath()

cxt.arc(200,200,200,0,Math.PI*0.5);

cxt.closePath();

cxt.stroke();

</script>

17

canvas 影象操作

通過js來獲取圖片

<canvas id="canvas" width="650" height="550" style="border:1px solid #000;"></canvas>

<script>

var canvas = document.getElementById('canvas');

var cxt = canvas.getContext('2d');

var img = new Image();

img.src = "img/bg.png";

img.onload = function(){

cxt.drawImage(img,0,0)

}

</script>

<img src="img/bg.png" id="img" style="display: none;" />

<canvas id="canvas" width="650" height="550" style="border:1px solid #000;"></canvas>

<script>

window.onload = function(){

var canvas = document.getElementById('canvas');

var cxt = canvas.getContext('2d');

var img = document.getElementById('img');

cxt.drawImage(img,0,0)

}

</script>

在畫布上定點陣圖像

canvas影象

影象：

影象是由掃描器、攝像機等輸入裝置捕捉實際畫面而產生的數字影象，是由畫素點陣構成的點陣圖。

在畫布上定點陣圖像的語法：

cxt.drawImage(image,dx,dy)

注意：與createPattern(img,repeat-

style)影象填充不同，context.drawImage(image,dx,dy)建立的是一個物件，createPattern(img,repeat-

style)是把圖片當成背景圖片填充。

例：

18

image ：規定要使用的影象、畫布或視訊。

x :  在畫布上放置影象的 x  座標位置。

y :  在畫布上放置影象的 y  座標位置。

在畫布上定點陣圖像，並規定影象的寬度和高度的語法

19

canvas影象

影象：

影象是由掃描器、攝像機等輸入裝置捕捉實際畫面而產生的數字影象，是由畫素點陣構成的點陣圖。

在畫布上定點陣圖像，並規定影象的寬度和高度的語法：

cxt.drawImage(img,x,y,width,height);

document.getElementById("pic").onload=function(){

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("pic");

ctx.drawImage(img,10,10,240,160);

};

image ：規定要使用的影象、畫布或視訊。

x :  在畫布上放置影象的 x  座標位置。

y :  在畫布上放置影象的 y  座標位置。

width :  可選。要使用的影象的寬度。（伸展或縮小影象）

height :  可選。要使用的影象的高度。（伸展或縮小影象）

剪下影象，並在畫布上定位被剪下的部分的語法

canvas影象

影象：

影象是由掃描器、攝像機等輸入裝置捕捉實際畫面而產生的數字影象，是由畫素點陣構成的點陣圖。

剪下影象，並在畫布上定位被剪下的部分的語法：

cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

20

img : 規定要使用的影象、畫布或視訊。

sx : 可選。開始剪下的 x 座標位置。

sy : 可選。開始剪下的 y 座標位置。

swidth : 可選。被剪下影象的寬度。

sheight : 可選。被剪下影象的高度。

x : 在畫布上放置影象的 x 座標位置

y : 在畫布上放置影象的 y 座標位置。

width : 可選。要使用的影象的寬度。（伸展或縮小影象）

height : 可選。要使用的影象的高度。（伸展或縮小影象）

var c=document.getElementById("canvas");

var ctx=c.getContext("2d");

var img=document.getElementById("pic");

ctx.drawImage(img,90,130,90,80,20,20,90,80);

image ：規定要使用的影象、畫布或視訊。

sx :  可選。開始剪下的 x  座標位置。

sy :  可選。開始剪下的