代码中用的图片:大小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('alert("Hello");', 3000);
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示: 1000 毫秒= 1 秒。
element.
addEventListener
(event, function, useCapture)
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
参数值
参数 | 描述 |
---|---|
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";
});
document.getElementById("demo").innerHTML = "Hello World";
});
element.getAttribute(attributename)
getAttribute() 方法返回指定属性名的属性值。
参数
参数 | 类型 | 描述 |
---|---|---|
attributename | 字符串值。 | 必需。需要获得属性值的属性名称。 |
返回值
类型 | 描述 |
---|---|
String | 指定属性的值。 |