• 利用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';
            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里面,再将内存中创建好的canvas放到页面上的这个canvas标签上,这只是一个思路,希望大家可以往这方面考虑

  • 相关阅读:
    单例模式
    分析GC日志
    JVM运行时参数
    JVM监控及诊断工具-GUI篇
    JVM监控及诊断工具-命令行篇
    性能监控与调优(概述篇)
    再谈类的加载器
    类的加载过程(类的生命周期)详解
    字节码指令集
    class文件结构
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426336.html
Copyright © 2020-2023  润新知