canvas——繪製序列幀動畫
阿新 • • 發佈：2019-02-16
程式碼中用的圖片：大小200*260
方法一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>序列幀動畫</title> </head> <body> <div id="container"> <canvas id="cavsImage"> 您的瀏覽器不支援canvas,請升級瀏覽器 </canvas> <button id="btnUp">↑</button> <button id="btnDown">↓</button> <button id="btnLeft">←</button> <button id="btnRight">→</button> </div> <script> (function(){ var canvas = document.querySelector('#cavsImage'); var ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; canvas.style.border = '1px solid #ccc'; var image = new Image(); image.src='images/soldier.png'; image.onload = function() { var frameIndex = 0; var direction = 0; setInterval(function () { //清除之前的圖片墨跡 ctx.clearRect(0,0,canvas.width,canvas.height); // 裁剪圖片 ctx.drawImage(image,50*frameIndex,65*direction,50,65,100,100,50*2,65*2); frameIndex++; frameIndex %=4; //取餘，重複0-3這四幅影象 },100); // 1幀影象/100s var btnUp = document.getElementById('btnUp'); btnUp.onclick = function () { direction = 3; }; var btnDown = document.getElementById('btnDown'); btnDown.onclick = function () { direction = 0; }; var btnLeft = document.getElementById('btnLeft'); btnLeft.onclick = function () { direction = 1; }; var btnRight = document.getElementById('btnRight'); btnRight.onclick = function () { direction = 2; }; }; })(); </script> </body> </html>
方法二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>序列幀動畫</title> </head> <body> <div id="container"> <canvas id="cavsImage"> 您的瀏覽器不支援canvas,請升級瀏覽器 </canvas> <button dir='3' id="btnUp">↑</button> <button dir='0' id="btnDown">↓</button> <button dir='1' id="btnLeft">←</button> <button dir='2' id="btnRight">→</button> </div> <script> (function(){ var canvas = document.querySelector('#cavsImage'); var ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height = 600; canvas.style.border = '1px solid #ccc'; var image = new Image(); image.src='images/soldier.png'; image.addEventListener('load',function() { var frameIndex = 0; var direction = 0; setInterval(function () { //清除之前的圖片墨跡 ctx.clearRect(0,0,canvas.width,canvas.height); // 裁剪圖片 ctx.drawImage(image,50*frameIndex,65*direction,50,65,100,100,50*2,65*2); frameIndex++; frameIndex %=4; //取餘，重複0-3這四幅影象 },100); // 1幀影象/100s var btnList = document.querySelectorAll('button'); for(var i=0;i<btnList.length;i++){ btnList[i].onclick = function () { var dir= this.getAttribute('dir'); direction = dir; }; } }); })(); </script> </body> </html>
setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
提示： 1000 毫秒= 1 秒。
element.addEventListener(event, function, useCapture)addEventListener() 方法用於向指定元素新增事件控制代碼。
提示： 使用 removeEventListener()
引數值
| 引數 | 描述 |
|---|---|
| event | 必須。字串，指定事件名。 注意: 不要使用 "on" 字首。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以檢視我們完整的 HTML DOM Event 物件參考手冊。 |
| function | 必須。指定要事件觸發時執行的函式。 當事件物件會作為第一個引數傳入函式。 事件物件的型別取決於特定的事件。例如， "click" 事件屬於 MouseEvent(滑鼠事件) 物件。 |
| useCapture | 可選。布林值，指定事件是否在捕獲或冒泡階段執行。 可能值:
|
例項
為 <button> 元素新增點選事件。 當用戶點選按鈕時，在 id="demo" 的 <p> 元素上輸出 "Hello World" :
document.getElementById("myBtn").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World";
});
element.getAttribute(attributename)
getAttribute() 方法返回指定屬性名的屬性值。
引數
| 引數 | 型別 | 描述 |
|---|---|---|
| attributename | 字串值。 | 必需。需要獲得屬性值的屬性名稱。 |
返回值
| 型別 | 描述 |
|---|---|
| String | 指定屬性的值。 |