Canvas Canvas骰子

      2020-03-17 23:03      HTML5

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);


上一篇:canvas基础学习(3)

下一篇:没有了