图片canvas播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height:780px;width:640px">
<div style="height:780px;width:640px">
<canvas id="my_canvas" width="640" height="780"></canvas>
<canvas id="canvas" width="640" height="780"></canvas>
</div>
<script>
var a ="my_canvas" ;
playImages(['1.png','2.png','3.png'],a);
//背景图片播放
function playImages(a,b){
var arrImgs = a;
var convas = document.getElementById(b);
var ctx = convas.getContext('2d');
var curImg = new Image();
var index = 0;
curImg.onload = function(){
ctx.drawImage(curImg,0,0);
}
setInterval(function(){
curImg.src = arrImgs[index];
index = index + 1;
if ( index === arrImgs.length ){
index = 0;
}
},200);
}
//预加载图片
</script>
</body>最后更新于 2018-01-12 14:00:43 并被添加「」标签，已有 776 位童鞋阅读过。
本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处
此处评论已关闭