h5游戏之js图形封装使用04(完结）

最新推荐文章于 2021-06-09 11:38:54 发布

D调的绿叶

最新推荐文章于 2021-06-09 11:38:54 发布

阅读量537

点赞数

分类专栏： egret 文章标签： html游戏

本文链接：https://blog.youkuaiyun.com/vipzjh/article/details/54561340

版权

egret 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现卡片动画的方法，包括不同数量圆形图案的绘制逻辑及发牌效果的实现过程。通过逐步调整卡片位置实现发牌动画，并展示了如何利用requestAnimationFrame进行平滑渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
这里写图片描述

把前面的draw
补充完整。

 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(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                break;
             case 2:
                draw2(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                break;
            case 3:
                //draw3();
                draw1(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                draw2(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                break;
            case 4:
                draw4(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                break;
             case 5:
                draw4(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                draw1(this.sx,this.sy,this.swidth,this.sheight,this.ballstyle);
                break;


        }
        function   draw1(sx,sy,swidth,sheight,ballstyle){

        var rad=swidth/8;//半径.先确定半径
        var sx=sx+swidth/2;
        var sy=sy+sheight/2;
           ctx.fillStyle=ballstyle;
           ctx.beginPath();
           ctx.arc(sx,sy,rad,0,Math.PI*2,true);
           ctx.closePath();
           ctx.fill();



    }
        function   draw2(sx,sy,swidth,sheight,ballstyle){
        var rad=swidth/8;//半径.先确定半径
        var sx=sx+swidth/2;    
        var sy1=sy+sheight/5;
        var sy2=sy+sheight-sheight/5;
            ctx.fillStyle=ballstyle;
           ctx.beginPath();
           ctx.arc(sx,sy1,rad,0,Math.PI*2,true);
           ctx.arc(sx,sy2,rad,0,Math.PI*2,true);
           ctx.closePath();
           ctx.fill();

    }
        function   draw3(){
       // alert("3个圆");这个偷懒不写了

    }
        function   draw4(sx,sy,swidth,sheight,ballstyle){
        var rad=swidth/8;//半径.先确定半径
        var sx1=sx+swidth/5;
        var sx2=sx+swidth-swidth/5;
        var sy1=sy+sheight/5;
        var sy2=sy+sheight-sheight/5;
           ctx.fillStyle=ballstyle;
           ctx.beginPath();
           ctx.arc(sx1,sy1,rad,0,Math.PI*2,true);
           ctx.arc(sx1,sy2,rad,0,Math.PI*2,true);
            ctx.fill();
           ctx.closePath();
             ctx.beginPath();
              ctx.arc(sx2,sy1,rad,0,Math.PI*2,true);
              ctx.arc(sx2,sy2,rad,0,Math.PI*2,true);
            ctx.closePath();

           ctx.fill();

    }
        function   draw5(){
       // alert("5个圆"); 这个也偷懒了

    }


    }//draw

然后又顺便做了一个发牌的按钮这里写图片描述

index.html
里面添加`发牌

先设置了一个变量var startGame;

然后再在startGame.js
里添加函数
function newGame(){

startGame=true;

}

然后重头的都在update里了。下面是startGame.js的全部代码

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
var yx;;
var poker;
var pokerArr=[];//扑克数组
var startpos_x;//设置起始坐标
var startpos_y;
var target_x;//移动到的目标坐标
var target_y;
var startGame;//设置bool
var firstCardid;//第一张开始移动的卡的id
var speed;
var w = window;
const raf = window.requestAnimationFrame//这么做是适应这种浏览器
  || window.webkitRequestAnimationFrame
  || window.mozRequestAnimationFrame
  || window.oRequestAnimationFrame
  || window.msRequestAnimationFrame
  || function(callback) {
    window.setTimeout(callback, 1000 / 60); //每隔1000/60ms
  };

function initGame(){

     //startGame=true;
     speed=1;
     target_x=canvas.width-70;
     target_y=20;
     startpos_x=20;
     startpos_y=canvas.height-100;
      for(let i=1;i<6;i++){
         let tmpPoker=new MiniPoker(startpos_x,startpos_y,50,80,i);
         tmpPoker.draw();
         startpos_x+=5;
         pokerArr.push([tmpPoker,false]);
     }
    firstCardid=pokerArr.length-1;;
    pokerArr[firstCardid][1]=true;
    main();//
}

function update(modifier){//更新数据,这个参数modifier，作为调试速度用的，当然简单的也可以不用

    if(startGame){
          if(pokerArr[firstCardid][1]){
                if(pokerArr[firstCardid][0].sx<target_x||pokerArr[firstCardid][0].sy>target_y){
        pokerArr[firstCardid][0].sx+=speed*modifier;
        pokerArr[firstCardid][0].sy-=speed*modifier*( Math.abs(target_y-pokerArr[firstCardid][0].sy)/Math.abs(target_x-pokerArr[firstCardid][0].sx));

              }else{
                  pokerArr[firstCardid][0].sx=target_x;
                  pokerArr[firstCardid][0].sy=target_y;
                  pokerArr[firstCardid][1]=false;
                  target_x-=70;
                  firstCardid--;
                  if(firstCardid<0){

                      startGame=false;
                      return;   

                  }
                  pokerArr[firstCardid][1]=true;;

              }

          }

    }//if startGame
}//update
function render(){//渲染画图
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(let i=0;i<pokerArr.length;i++){
        pokerArr[i][0].draw();
    }
}
function main(){//住循环函数
    update(40/6);
     render();
    raf (main);
}
function newGame(){
    startGame=true;
}