h5游戏之js图形封装使用03

新建立一个miniPoker.js。后面就简短的写了
加入

<script src="js/miniPoker.js"></script>

然后现在创建类。
sx,sy是坐标；
swidth,sheight是宽高；
n，表示画几筒；
然后this.fillStyle,this.bgstyle,先弄个默认的样式，到时候自己可以设置。

class MiniPoker{

    constructor(sx,sy,swidth,sheight,n){
        this.sx=sx;
        this.sy=sy;
        this.swidth=swidth;
        this.sheight=sheight;
        this.n=n;
        this.fillStyle="rgb(0,0,0)";
        this.bgstyle="rgba(255,255,255,0.3)";
          //this.fillStyle=fillStyle;

        }
    draw(){
         ctx.beginPath();
       //ctx.lineWidth="6";
         ctx.strokeStyle=this.fillStyle;;
         ctx.rect(this.sx,this.sy,this.swidth,this.sheight);
         ctx.stroke();
         ctx.fillStyle=this.bgstyle;
         ctx.fill();

        switch(this.n){

            case 1:
                draw1();
                break;
             case 2:
                draw2();
                break;
            case 3:
                draw3();
                break;
            case 4:
                draw4();
                break;
             case 5:
                draw5();
                break;


        }
        function   draw1(){
        alert("1个圆");

    }
        function   draw2(){
        alert("2个圆");

    }
        function   draw3(){
        alert("3个圆");

    }
        function   draw4(){
        alert("4个圆");

    }
        function   draw5(){
        alert("5个圆");

    }


    }//draw
    setbackground(bgstyle){
        this.bgstyle=bgstyle;
    }
   }//类结束

好了，draw1-5方法先留着，到时候在写。
startGame.js里面写入

function initGame(){

     // yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
     // yx.draw(); 
     // speed=1;
     poker=new MiniPoker(255,100,60,60,1);
     poker.draw();
     //main();
}

这样就直接出来了。