Canvas骰子

    var csns=document.getElementById("csns");
    var tcx=csns.getContext("2d");
    csns.style.border="1px red solid";
    tcx.strokeStyle="#1296DB"
    tcx.beginPath();
    tcx.moveTo(95,50);
    tcx.lineTo(170,50);
    tcx.arcTo(190,50,190,70,15);
    tcx.lineTo(190,140);
    tcx.arcTo(190,160,170,160,15);
    tcx.lineTo(100,160);
    tcx.arcTo(80,160,80,140,15);
    tcx.lineTo(80,70);
    tcx.arcTo(80,50,100,50,15);
    tcx.stroke();
    var s=0;
    var createpoint=setInterval(function () {
       tcx.clearRect(90,60,90,90);
       s++;if(s==7)s=0;
       tcx.fillStyle="#1296DB"
       switch(s){
           case 1:
               tcx.beginPath();
               tcx.arc(135,105,20,0,2*Math.PI);
               tcx.fill();
               break;
           case 2:
               tcx.beginPath();
               tcx.arc(112,105,10,0,2*Math.PI);
               tcx.fill();
               tcx.beginPath();
               tcx.arc(158,105,10,0,2*Math.PI);
               tcx.fill();
               break;
           case 3:
               var x=85, y=55;
               for(var i=0;i<s;i++){
                   tcx.beginPath();
                   x+=25;
                   y+=25;
                   tcx.arc(x,y,10,0,2*Math.PI);
                   tcx.fill();
               }
               break;
           case 4:
           case 5:
               var x=110,y=30;
               for(var i=0;i<s;i++){
                   tcx.beginPath();
                   if(i>1){
                       x=160;
                   }
                   if(i==2){  y=30;}
                   y+=50;
                   if(s==5) {
                       if (i == 4) {
                           x -= 25;
                           y -= 75
                       }
                   }
                   tcx.arc(x, y, 10, 0, 2 * Math.PI);
                   tcx.fill();
               }
               break;
           case 6:
               var x=0,y=55;
               for(var i=0;i<s;i++){
                   tcx.beginPath();
                   if(i>2){
                       x=110;
                   }else{
                       x=160
                   }
                   if(i==3){  y=55;}
                   y+=25;
                   tcx.arc(x,y,10,0,2*Math.PI);
                   tcx.fill();
               };
               break;
       }
    },200);

 

转载于:https://www.cnblogs.com/leitong/p/7447787.html