畫布day3繪製圖片
阿新 • • 發佈：2018-11-06
做動畫
繪製圖片
- drawImage()
- 三個引數drawImage(img,x,y)
- img 圖片物件、canvas物件、video物件
- x,y 圖片繪製的左上角
- 五個引數drawImage(img,x,y,w,h)
- img 圖片物件、canvas物件、video物件
- x,y 圖片繪製的左上角
- w,h 圖片繪製尺寸設定(圖片縮放，不是擷取)
- 九個引數drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 圖片物件、canvas物件、video物件
- x,y,w,h 圖片中的一個矩形區域
- x1,y1,w1,h1 畫布中的一個矩形區域
- img 圖片物件、canvas物件、video物件
- 三個引數drawImage(img,x,y)
序列幀動畫
- 繪製精靈圖
- 動起來
- 控制邊界
- 鍵盤控制
座標變換
- 平移 移動畫布的原點
- translate(x,y) 引數表示移動目標點的座標
- 縮放
- scale(x,y) 引數表示寬高的縮放比例
- 旋轉
- rotate(angle) 引數表示旋轉角度
html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //用法1：三個引數 // 第一個引數：圖片物件，後兩個引數：圖片在畫布中的位置 x，y ctx.drawImage(img,100,100); //用法2：五個引數 第四個，五個表示圖片的寬高，不是裁剪 ，是縮放 ctx.drawImage(img,100,100,200,200); //用法三：9個引數 // 第一組 ：圖片上的定位座標（x，y） -----就是說從圖片的那個位置開始擷取 //第二組：擷取圖片區域的寬高 w，h； //第三組：繪製圖片在畫布中的位置（x，y） -------就是說圖片在畫布的那個位置顯示 //第三組：在畫布中圖片的寬高w，h-------如果和第二組大小一樣，就不縮放，如果比第二組大，就放大 ctx.drawImage(img,134,129,200,200,100,100,200,200); }; </script> </body> </html>
圖片物件
為什麼要引入圖片物件？
因為做遊戲的時候必定會引入很多圖片，而引入很多圖片用DOM的方式引入，那麼就會使得頁面上存在很多圖片，哪怕是隱藏起來，那這些圖片也還在頁面上，顯得累贅
引入圖片物件方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px solid red; margin: 100px auto; display: block; } </style> </head> <body> <canvas width="600" height="600"></canvas> <script> //獲取畫布 var canvas = document.querySelector('canvas'); //獲取畫布上下文,創造一個環境 var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function () { // 不需要在頁面上（DOM），圖片多了，顯得累贅，哪怕影藏，這張圖片也在玉面上，所以只需要放在記憶體上 // 所以需要載入圖片 var img = document.createElement('img'); img.src = 'image/01.jpg'; // 當圖片沒有載入完，是獲取不到圖片的，所以必須等圖片載入完 //由於有載入順序，有的瀏覽器圖片可能載入完了，再繫結，沒必要了，為了相容，所以把載入事件寫在前面 img . onload = function (){ //一定可以使用 }; img.src = 'image/01.jpg'; }; // 載入圖片，新增src屬性 img.src = 'image/image/01.jpg'; </script> </body>
一種是通過creatElement建立
一種是通過建立物件的方式建立（建議用這種）