HTML5 3

複習：

HTML5新特性：

(1)新的語義標籤和屬性

(2)表單2.0

(3)視頻和音頻

  <video src="" autoplay loop controls muted poster preload="auto">

  <audio src="">

(4)Canvas繪圖 —— 重點

(5)SVG繪圖

(6)地理定位

(7)拖放API

(8)WebWorker

(9)WebStorage

(10)WebSocket

 

JS繪圖技術：

<canvas width="600" height="400"></canvas>

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

//經常使用屬性

ctx.fillStyle = 顏色/漸變對象

ctx.strokeStyle =顏色/漸變對象

ctx.lineWidth = 1

ctx.font = '10px sans-serif'

ctx.textBaseline = 'alphabetic'

ctx.shadowColor = 'rgba(0,0,0,0)'

ctx.shadowOffsetX = 0

ctx.shadowOffsetY = 0

ctx.shadowBlur = 0

 

//經常使用方法

(1)繪製矩形

ctx.fillRect(x, y, w, h)

ctx.strokeRect(x, y, w, h)

ctx.clearRect(x, y, w, h)

(2)繪製文本

ctx.fillText(txt, x, y)

ctx.strokeText(txt, x, y)

ctx.measureText(txt).width

(3)繪製路徑

(4)繪製圖像

 

今日目標：

(1)使用Canvas繪製路徑和圖像 —— 重點&難點

(2)使用第三方繪圖工具 —— Chart.js，掌握

 

 

1.使用Canvas繪製路徑(Path)

  提示：Canvas中的路徑概念與Photoshop中鋼筆工具相似的。路徑自己是不可見的，有三個用途：描邊、填充(閉合)、裁剪(閉合)

  Canavs中與路徑繪製相關方法：

  ctx.beginPath()   //開始一條新路徑

  ctx.closePath()    //閉合路徑，讓最後一個錨點自動鏈接到第一個錨點

  ctx.moveTo(x, y)  //移動到指定點

  ctx.lineTo(x,y)      //從當前點到指定點繪製直線路徑

  ctx.arc()              //繪製拱形路徑

  ctx.ellipse()         //繪製橢圓路徑

  ctx.bezierCurveTo()    //繪製貝塞爾曲線路徑

  ----------------------------------------------

  ctx.stroke()

  ctx.fill()

  ctx.clip()

 

練習：

(1)使用直線路徑繪製座標軸

      

(2)使用圓拱+定時器繪製能夠前進的進度條

        

(3)建立一個函數：openMouth()，在畫布上繪製以下的圖形：

      

(4)建立一個函數：closeMouth()，在畫布上繪製以下的圖形：

      

(5)使用定時器，不停的調用openMouth()和closeMouth()

 

 

2.使用Canvas繪製圖像

  提示：圖片的定位點在圖片的左上角。客戶端JS必須等待圖片加載完成才能開始繪製。

  var img = new Image();

  img.src = 'x.jpg';

  img.onload = function(){

      //圖片已經加載完成了

      ctx.drawImage(img, x, y)   //使用默認的寬高

       ctx.drawImage(img, x, y, w, h)

  }

練習：           

(1)在畫布的四個角各繪製一個小飛機

(2)在畫布的中央繪製一個2倍標準大小的飛機

(3)*繪製一個能夠隨着鼠標而移動的小飛機，提示須要使用mousemove

   注意：Canvas繪圖中，只有一個HTML元素——canvas！！其它圖形圖像都不是元素，不能綁定事件函數！！

(4)*繪製一個能夠左右移動的小飛機

(5)**繪製一個能夠在畫布範圍內走斜線移動的小飛機——碰到畫布的任何一個邊緣，當即反彈

 

 

小結：Canvas繪圖能夠繪製的內容： (1)矩形： ctx.fillRect()   ctx.strokeRect()   ctx.clearRect() (2)文本： ctx.fillText()   ctx.strokeText()   ctx.measureText() (3)路徑 - 描邊/填充/裁剪    ctx.beginPath()   ctx.closePath()    ctx.moveTo()   ctx.lineTo()   ctx.arc()    ctx.stroke()  ctx.fill()   ctx.clip() (4)圖像：  ctx.drawImage() (5)

 

3.繪圖上下文的狀態改變和恢復 —— 難點&晦澀

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

  //能夠將繪圖上下文對象（即畫筆對象）進行變形(transform)——與對Canvas施加CSS Transform樣式不一樣，繪圖上下文的變形隻影響當前繪製的圖形圖像內容

  ctx.translate(x,y) //座標軸原點平移到指定點，全部點的座標都發生改變

  ctx.rotate(deg)   //畫筆旋轉，則內容旋轉，軸點在座標軸原點

  ctx.scale()           //畫筆縮放

  ====================

  ctx.save()            //保存繪圖上下文(畫筆）當前的變形數據

  ctx.restore()              //恢復最近一次保存的畫筆的變形相關的狀態

 

 

練習：***有點坑——繪製四個小飛機，各在畫布的一個角在繞着本身的中心在旋轉。

 

 

項目中Canvas技術的主要用途：

(1)繪製統計圖

(2)小遊戲

(3)繪圖板

(4)動態的背景（帶交互帶動畫）

 

4.使用第三方統計圖繪製工具——Chart.js——重點在於自學過程

  提示：第三方的繪圖工具很是多！直接百度「JS繪圖工具」！

  第三方工具的使用步驟：

  (1)打開官網，看工具介紹

       http://www.chartjs.org/

       Simple yet flexible JavaScript charting for designers & developers。一款開源的、提供了8中圖表的、基於Canvas、響應式圖表繪製工具庫。

  (2)參考DEMO，編寫示例程序

       new Chart(canvasId, {

             type: 'bar',             //圖表的類型，共8中    

              data: {  },                     //圖表必需的數據

              options: {  }          //可選項

       });

  (3)查看API Document，實現本身的項目需求

       參考手冊中的示例代碼

 

 

 

課後練習：

1)     使用Canvas繪製一個隨機改變的驗證碼圖片

      

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串長度間的隨機數 ]; 

 要求：

         畫布背景顏色隨機(淺色)  ctx.fillRect()

文字內容隨機、大小隨機，顏色隨機(深色)、旋轉角度隨機。

         5條隨機干擾線（深色），處於文字上方。

         100個雜色點（半徑爲1爲圓），處於文字上方。

 

2.仿網易雲音樂的播放界面

 

  點擊播放按鈕，碟片開始旋轉，背景音樂開始播放；

再次點擊播放按鈕，碟片中止旋轉，背景音樂中止播放。