Html5Canvas程序設(shè)計教學(xué)大綱課程代碼：ABXX0528課程中文名稱：Html5Canvas程序設(shè)計課程英文名稱：Html5CanvasProgramming課程性質(zhì)：選修課程學(xué)分數(shù)：3學(xué)分課程學(xué)時數(shù)：48學(xué)時其中理論學(xué)時：32學(xué)時實驗學(xué)時：16學(xué)時授課對象：信息與計算科學(xué)先修課程：計算機圖形學(xué)、面向?qū)ο蟪绦蛟O(shè)計、計算機程序設(shè)計、軟件工程一、課程簡介《HTML5Canvas基礎(chǔ)教程》從HTML5和JavaScript(以及jQuery)的基礎(chǔ)知識講起，全面介紹了HTML5Canvas的各種特性，包括渲染上下文、坐標(biāo)系統(tǒng)、繪制圖形、保存和恢復(fù)畫布狀態(tài)，以及變形、合成、處理圖像和視頻等，讓讀者對Canvas建立起完整的認識。隨后討論了動畫循環(huán)、記憶形狀、模擬運動、碰撞檢測等基本而又重要的概念，并通過實例“太空保齡球”和“躲避小行星”的開發(fā)與設(shè)計，讓讀者掌握Html5Canvas游戲的基本流程，學(xué)會響應(yīng)用戶操作、創(chuàng)造虛擬環(huán)境、循環(huán)利用對象、設(shè)計計分系統(tǒng)等游戲開發(fā)必備的知識。二、教學(xué)基本內(nèi)容和要求（一）HTML5簡介教學(xué)內(nèi)容：HTML簡史，HTML5的新特性，結(jié)構(gòu)和內(nèi)容元素，表單，媒體元素，剖析HTML5頁面的結(jié)構(gòu)。教學(xué)要求：了解Html簡史以及HTML5的新特性，理解掌握HTML5結(jié)構(gòu)與內(nèi)容重點難點：HTML5結(jié)構(gòu)與內(nèi)容，表單，媒體元素（二）JavaScript基礎(chǔ)教學(xué)內(nèi)容：JavaScript概述，jQuery架構(gòu)及應(yīng)用，在HTML頁面上應(yīng)用JavaScript，變量與數(shù)據(jù)類型，條件語句，函數(shù)，對象，數(shù)組，循環(huán)；DOM/HTML網(wǎng)頁示例，JavaScript與DOM，jQuery與DOM。教學(xué)要求：了解JavaScript概述，jQuery架構(gòu)及應(yīng)用，掌握HTML與JavaScript，了解DOM，掌握JavaScript操作DOM的方法，掌握jQuery+JavaScript+DOM的HTML程序設(shè)計方法。重點難點：JavaScript的變量與數(shù)據(jù)類型、條件語句、函數(shù)、對象、數(shù)組、循環(huán)等，JavaScript程序設(shè)計。（三）Canvas基礎(chǔ)教學(xué)內(nèi)容：Canvas元素基礎(chǔ)，2D渲染上下文，坐標(biāo)系統(tǒng)，Canvas圖形設(shè)計基礎(chǔ)（繪制基本圖形和線條，線條，圓形，樣式，繪制文本，擦除Canvas）。教學(xué)要求：了解Canvas元素基礎(chǔ)知識，掌握其中2D渲染上下文，坐標(biāo)系統(tǒng)，Canvas圖形設(shè)計基礎(chǔ)（繪制基本圖形和線條，線條，圓形，樣式，繪制文本，擦除Canvas）。重點難點：2D渲染上下文，坐標(biāo)系統(tǒng)，Canvas圖形設(shè)計基礎(chǔ)。（四）Canvas進階教學(xué)內(nèi)容：保存和恢復(fù)繪圖狀態(tài)，幾何變換（變形，平移，縮放，旋轉(zhuǎn)），變換矩陣，合成（全局阿爾法值，合成操作），陰影，漸變，復(fù)雜路徑，圖形存儲。教學(xué)要求：掌握Canvas繪圖狀態(tài)設(shè)置，掌握其中2D幾何圖形的幾何變換處理技術(shù)、2D圖形合成技術(shù)，陰影，漸變，復(fù)雜路徑等技術(shù)及相關(guān)程序設(shè)計方法，了解掌握圖形存儲方法。重點難點：2D幾何圖形的幾何變換處理技術(shù)、2D圖形合成技術(shù)，陰影，漸變，復(fù)雜路徑等技術(shù)及相關(guān)程序設(shè)計方法。（五）圖像和視頻教學(xué)內(nèi)容：加載圖像，調(diào)整和裁剪圖像(調(diào)整圖像大小,裁剪圖像,陰影),圖像變形(平移,旋轉(zhuǎn),縮放與翻轉(zhuǎn)),訪問像素值等。Canvas圖像處理初步（圖像繪制，像素操作，馬賽克效果等），圖像基本處理技術(shù)（反轉(zhuǎn)顏色，灰度，像素化），視頻處理技術(shù)，畫布Canvas配置。教學(xué)要求：了解掌握Canvas圖像處理各項技術(shù)，熟練進行圖像處理程序設(shè)計。重點難點：Canvas圖像處理各項技術(shù)，圖像處理程序設(shè)計。（六）Canvas動畫教學(xué)內(nèi)容：Canvas動畫基礎(chǔ)，循環(huán)動畫技術(shù)，運動方向處理(改變方向,圓周運動,三角函數(shù),反彈處理)。教學(xué)要求：了解基于WEB的計算機動畫技術(shù)發(fā)展，了解掌握Canvas動畫基礎(chǔ)，循環(huán)動畫技術(shù)及運動方向處理技術(shù)。重點難點：循環(huán)動畫技術(shù)，運動方向處理(改變方向,圓周運動,三角函數(shù),反彈處理)。（七）高級Canvas動畫（選學(xué)）教學(xué)內(nèi)容：物理常識簡介，物理知識與動畫，

碰撞檢測。教學(xué)要求：了解自然界的物理常識，了解物理知識與計算機動畫的關(guān)系，掌握計算機動畫中的物體碰撞檢測處理技術(shù)。重點難點：物理知識與計算機動畫的關(guān)系，掌握計算機動畫中的物體碰撞檢測處理技術(shù)的學(xué)習(xí)與應(yīng)用。（八）游戲設(shè)計實例（選學(xué)）三、實驗教學(xué)內(nèi)容及基本要求實驗項目小計備注（一）HTML+JavaScript程序初步2（二）JavaScript結(jié)構(gòu)化程序設(shè)計2（三）JavaScript面向?qū)ο蟪绦蛟O(shè)計2（四）Html5Canvas圖形設(shè)計4（五）Html5Canvas圖像處理2（六）綜合實驗*4合計16*：綜合實驗名稱根據(jù)實際實驗內(nèi)容確定四、教學(xué)方法與手段理論教學(xué)以講授方式為主+多媒體輔助。以“案例”教學(xué)來驅(qū)動啟發(fā)學(xué)生自主學(xué)習(xí)，授課教師充分利用現(xiàn)代教學(xué)手段與環(huán)境所提供的各種功能，做到信息可見、過程可控，同時注重理論聯(lián)系實際。五、教學(xué)學(xué)時分配教學(xué)內(nèi)容課時習(xí)題課小計備注1HTML5簡介222JavaScript基礎(chǔ)6283Canvas基礎(chǔ)444Canvas進階5275圖像和視頻3146Canvas動畫337高級Canvas動畫（選學(xué)）228游戲設(shè)計實例（選學(xué)）22合計27532六、考核方式與成績評定標(biāo)準在課程總成績評定中，平時考核占30%，期末考核占70%。1.平時考核（20%）平時考核包括：考勤（40%）、課堂參與程度（30%）、實踐活動完成質(zhì)量（30%）。2.期末考核（80%）期末考核包括：試卷考核或上機考核。七、教學(xué)參考資源1、參考書目：（一）教材：《HTML5Canvas基礎(chǔ)教程》，RobHawkes(作者),周廣新(譯者),曾少寧(譯者),盛海艷等(譯者)等，人民郵電出版社，2012年1月（二）教學(xué)參考書1、《HTML5Canvas核心技術(shù):圖形、動畫與游戲開發(fā)》，基瑞(DavidGeary)(作者),愛飛翔(譯者)，機械工業(yè)出版社，2013年5月2、《響應(yīng)式Web設(shè)計:HTML5和CSS3實戰(zhàn)》，BenFrain(作者),王永強