代码中用的图片:大小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";
});
element.getAttribute(attributename)
getAttribute() 方法返回指定属性名的属性值。
参数
参数 | 类型 | 描述 |
---|---|---|
attributename | 字符串值。 | 必需。需要获得属性值的属性名称。 |
返回值
类型 | 描述 |
---|---|
String | 指定属性的值。 |