利用canvas来绘制一个会动的图画,欢迎指教,c

作者:分分快三计划
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制小人动画</title>
    <style>
        canvas{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <!-- 绘制小人动画 -->
    <canvas width="400" height="600" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    function toAngle(radian){
        return radian*180/Math.PI;
    }
    function toRadian(angle){
        return angle*Math.PI/180;
    }
    function img(ctx,element,x0,y0){
        var x = x0,
            y = y0;
        element.onload = function(){
            var width = element.width/4,
            height = element.height/4;
            var i = 0,
                j = 0,
                a = 0;
            setInterval(function(){
                //x = x   a;
                ctx.clearRect(x,y,width,height);
                ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
                i   ;
                if(i == 4){
                    setTimeout(function(){    
                        i = 0;
                        if(j == 0){
                            j =1;
                            //a-=10;
                        }else if(j == 1){
                            j = 3;
                        }else if(j == 2){
                            j = 0;
                        }else if(j == 3){
                            j = 2;
                            //a =10;
                        }
                    },20)
                }
            },200)
        }
    };
        var img1 = new Image();
        img1.src = 'imgs/game1.png';
        var img2 = new Image();
        img2.src = 'imgs/game2.png';
        var img3 = new Image();
        img3.src = 'imgs/game3.png';
        var img4 = new Image();
        img4.src = 'imgs/game4.png';
        var img5 = new Image();
        img5.src = 'imgs/game5.png';
        var img6 = new Image();
        img6.src = 'imgs/game6.png';
        var img7 = new Image();
        img7.src = 'imgs/game7.png';
        var img8 = new Image();
        img8.src = 'imgs/game8.png';
        var img9 = new Image();
        img9.src = 'imgs/game9.png';
        var img10 = new Image();
        img10.src = 'imgs/game10.png';
        var img11 = new Image();
        img11.src = 'imgs/game11.png';
        var img12 = new Image();
        img12.src = 'imgs/game12.png';
        img(ctx,img1,0,0);
        img(ctx,img2,50,0);
        img(ctx,img3,100,0);
        img(ctx,img4,150,0);
        img(ctx,img5,200,0);
        img(ctx,img6,250,0);
        img(ctx,img7,300,0);
        img(ctx,img8,350,0);
        img(ctx,img9,0,100);
        img(ctx,img10,50,100);
        img(ctx,img11,100,100);
        img(ctx,img12,150,100);
</script>
</html>

利用canvas来绘制一个会动的图画,欢迎指教,canvas图画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制小人动画</title>
<style>
canvas{
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 绘制小人动画 -->
<canvas width="400" height="600" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function toAngle(radian){
return radian*180/Math.PI;
}
function toRadian(angle){
return angle*Math.PI/180;
}
function img(ctx,element,x0,y0){
var x = x0,
y = y0;
element.onload = function(){
var width = element.width/4,
height = element.height/4;
var i = 0,
j = 0,
a = 0;
setInterval(function(){
//x = x a;
ctx.clearRect(x,y,width,height);
ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
i ;
if(i == 4){
setTimeout(function(){
i = 0;
if(j == 0){
j =1;
//a-=10;
}else if(j == 1){
j = 3;
}else if(j == 2){
j = 0;
}else if(j == 3){
j = 2;
//a =10;
}
},20)
}
},200)
}
};
var img1 = new Image();
img1.src = 'imgs/game1.png';
img(ctx,img1,0,0);

//这边是自己封装了一个函数,其实从性能优化的角度来考虑,我们可以先在内存中创建一个canvas标签,将这个图画放在内存中的canvas里面,再将内存中创建好的canvas放到页面上的这个canvas标签上,这只是一个思路,希望大家可以往这方面考虑
</script>
</html>

!DOCTYPE html html lang="en" head meta charset="UTF-8" title绘制小人动画/title style canvas{ border:...

 

//这边是自己封装了一个函数,其实从性能优化的角度来考虑,我们可以先在内存中创建一个canvas标签,将这个图画放在内存中的canvas里面,再将内存中创建好的canvas放到页面上的这个canvas标签上,这只是一个思路,希望大家可以往这方面考虑

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划