查看: 1771|回复: 0

[HTML代码] Canvas骰子

发表于 2017-9-13 08:00:01
太阳http代理AD
  1. var csns=document.getElementById("csns");
  2. var tcx=csns.getContext("2d");
  3. csns.style.border="1px red solid";
  4. tcx.strokeStyle="#1296DB"
  5. tcx.beginPath();
  6. tcx.moveTo(95,50);
  7. tcx.lineTo(170,50);
  8. tcx.arcTo(190,50,190,70,15);
  9. tcx.lineTo(190,140);
  10. tcx.arcTo(190,160,170,160,15);
  11. tcx.lineTo(100,160);
  12. tcx.arcTo(80,160,80,140,15);
  13. tcx.lineTo(80,70);
  14. tcx.arcTo(80,50,100,50,15);
  15. tcx.stroke();
  16. var s=0;
  17. var createpoint=setInterval(function () {
  18. tcx.clearRect(90,60,90,90);
  19. s++;if(s==7)s=0;
  20. tcx.fillStyle="#1296DB"
  21. switch(s){
  22. case 1:
  23. tcx.beginPath();
  24. tcx.arc(135,105,20,0,2*Math.PI);
  25. tcx.fill();
  26. break;
  27. case 2:
  28. tcx.beginPath();
  29. tcx.arc(112,105,10,0,2*Math.PI);
  30. tcx.fill();
  31. tcx.beginPath();
  32. tcx.arc(158,105,10,0,2*Math.PI);
  33. tcx.fill();
  34. break;
  35. case 3:
  36. var x=85, y=55;
  37. for(var i=0;i<s;i++){
  38. tcx.beginPath();
  39. x+=25;
  40. y+=25;
  41. tcx.arc(x,y,10,0,2*Math.PI);
  42. tcx.fill();
  43. }
  44. break;
  45. case 4:
  46. case 5:
  47. var x=110,y=30;
  48. for(var i=0;i<s;i++){
  49. tcx.beginPath();
  50. if(i>1){
  51. x=160;
  52. }
  53. if(i==2){ y=30;}
  54. y+=50;
  55. if(s==5) {
  56. if (i == 4) {
  57. x -= 25;
  58. y -= 75
  59. }
  60. }
  61. tcx.arc(x, y, 10, 0, 2 * Math.PI);
  62. tcx.fill();
  63. }
  64. break;
  65. case 6:
  66. var x=0,y=55;
  67. for(var i=0;i<s;i++){
  68. tcx.beginPath();
  69. if(i>2){
  70. x=110;
  71. }else{
  72. x=160
  73. }
  74. if(i==3){ y=55;}
  75. y+=25;
  76. tcx.arc(x,y,10,0,2*Math.PI);
  77. tcx.fill();
  78. };
  79. break;
  80. }
  81. },200);
复制代码



太阳http代理AD
回复

使用道具 举报