[Canvas]越来越近的女孩

最新推荐文章于 2024-07-21 10:17:51 发布

weixin_30725467

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiandedanteng/p/10466895.html

版权

本作比前作增加了控制功能，观看动态效果请点此下载代码用Chrome或Firfox浏览器观看。

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>越来越近的女孩 19.3.3 18:11 by:逆火 horn19782016@163.com</title>
     
     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }
     
     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>
     
    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='行动'/>
        </div>
     
        <canvas id="canvas" width="192px" height="192px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;
    
    if(paused){
        animateBtn.value="行动";
    }else{
    
        animateBtn.value="暂停";
        window.requestAnimationFrame(animate); 
    }
}

var ctx;// 绘图环境
var cds;// 坐标数组
function init(){
    var canvas=document.getElementById('canvas');
    canvas.width=192;
    canvas.height=192;
    ctx=canvas.getContext('2d');
    
    // 图块坐标
    cds=[
        {'pos':'pic/1.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/2.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/3.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/4.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/5.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/6.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/7.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/8.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/9.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/10.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/11.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/12.gif','x':'0', 'y':'0','width':'192','height':'192'},
   ];
};

var index=0;
var i=0;
function animate(){
    if(!paused){
        index++;
        if(index>108){
            index=0;
        }
        i=index % 12;

        img=new Image();
        img.src=cds[i].pos;
        
        ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height); 
    
        setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        }, 0.10 * 1000 );// 延时执行
    }
}
//-->
</script>

转载于:https://www.cnblogs.com/xiandedanteng/p/10466895.html

weixin_30725467

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Canvas]越来越近的女孩

本作比前作增加了控制功能，观看动态效果请点此下载代码用Chrome或Firfox浏览器观看。图例：代码：<!DOCTYPE html><html lang="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><head>...
复制链接

扫一扫