Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
xmnk
/
wkshi
2
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Árvore: 736b6d262d
Ramos Etiquetas
wkshi
/
public
/
vendor
/
echarts
/
test
/
canvas-replay.html

canvas-replay.html 16 KB
Histórico Em bruto

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 
  1. <!DOCTYPE>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <script src="lib/esl.js"></script>
    6. 

  6.         <script src="lib/config.js"></script>
    7. 

  7.         <script src="lib/jquery.min.js"></script>
    8. 

  8.         <script src="lib/facePrint.js"></script>
    9. 

  9. 		<script src="ut/lib/canteen.js"></script>
    10. 

  10.         <script src="lib/testHelper.js"></script>
    11. 

  11.         <meta name="viewport" content="width=device-width, initial-scale=1" />
    12. 

  12.         <link rel="stylesheet" href="lib/reset.css">
    13. 

  13.     </head>
    14. 

  14.     <body>
    15. 

  15.         <style>
    16. 

  16.             h1 {
    17. 

  17.                 line-height: 60px;
    18. 

  18.                 height: 60px;
    19. 

  19.                 background: #146402;
    20. 

  20.                 text-align: center;
    21. 

  21.                 font-weight: bold;
    22. 

  22.                 color: #eee;
    23. 

  23.                 font-size: 14px;
    24. 

  24.             }
    25. 

  25.             .chart {
    26. 

  26.                 height: 500px;
    27. 

  27.             }
    28. 

  28.         </style>
    29. 

  29. 

  30. 

  31.         <canvas class="chart" id="main"></canvas>
    32. 

  32. 

  33. 

  34. 

  35. 

  36. 

  37. 

  38. 

  39. <script>
    40. 

  40. 

  41. var stack =
    42. 

  42. 

  43. // -------------------------------------------------
    44. 

  44. 

  45. [
    46. 

  46. 

  47. 

  48. {"method":"save","arguments":[]},{"method":"clearRect","arguments":[0,0,400,300]},{"method":"save","arguments":[]},{"attr":"fillStyle","val":"transparent"},{"method":"fillRect","arguments":[0,0,400,300]},{"method":"restore","arguments":[]},{"attr":"shadowBlur","val":0},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"attr":"shadowColor","val":"#000"},{"attr":"lineCap","val":"round"},{"attr":"lineJoin","val":"miter"},{"attr":"miterLimit","val":10},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"globalAlpha","val":1},{"attr":"globalCompositeOperation","val":"source-over"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40.5,240]},{"method":"lineTo","arguments":[40.5,60]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"butt"},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,40,45]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["数量",0,-6]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"round"},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354.5,240]},{"method":"lineTo","arguments":[354.5,60]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"butt"},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,354,45]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["比例",0,-6]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,240.5]},{"method":"lineTo","arguments":[35,240.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,204.5]},{"method":"lineTo","arguments":[35,204.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,168.5]},{"method":"lineTo","arguments":[35,168.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,132.5]},{"method":"lineTo","arguments":[35,132.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,96.5]},{"method":"lineTo","arguments":[35,96.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,60.5]},{"method":"lineTo","arguments":[35,60.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,240.5]},{"method":"lineTo","arguments":[359,240.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,204.5]},{"method":"lineTo","arguments":[359,204.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,168.5]},{"method":"lineTo","arguments":[359,168.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,132.5]},{"method":"lineTo","arguments":[359,132.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,96.5]},{"method":"lineTo","arguments":[359,96.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,60.5]},{"method":"lineTo","arguments":[359,60.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,32,240]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["0",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,204]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["20",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,168]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["40",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,132]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["60",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,96]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["80",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,60]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["100",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,240]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["0%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,204]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["20%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,168]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["40%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,132]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["60%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,96]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["80%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,60]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["100%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":"#73cafd"},{"attr":"globalAlpha","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[53.857,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["28",62.857,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[99.571,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["25",108.571,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[145.286,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["27",154.286,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[191,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["26",200,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[236.714,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",245.714,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[282.429,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",291.429,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[328.143,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",337.143,235]},{"method":"restore","arguments":[]},{"method":"save","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[61.857,58.5,0,183]},{"method":"closePath","arguments":[]},
    49. 

  49. 

  50. 

  51. {"method":"clip","arguments":[]},
    52. 

  52. {"method":"setTransform","arguments":[1,0,0,1,0,0]},
    53. 

  53. {"attr":"shadowBlur","val":10},
    54. 

  54. {"attr":"shadowOffsetX","val":10},
    55. 

  55. {"attr":"shadowOffsetY","val":10},
    56. 

  56. {"attr":"shadowColor","val":"rgba(0,0,0,0.4)"},
    57. 

  57. {"attr":"lineJoin","val":"bevel"},
    58. 

  58. {"attr":"fillStyle","val":"none"},
    59. 

  59. {"attr":"strokeStyle","val":"#999"},
    60. 

  60. {"attr":"globalAlpha","val":1},
    61. 

  61. {"attr":"lineWidth","val":3},
    62. 

  62. 

  63. 

  64. {"method":"setTransform","arguments":[1,0,0,1,0,0]},
    65. 

  65. 

  66. {"method":"beginPath","arguments":[]},
    67. 

  67. {"method":"moveTo","arguments":[62.857,92.4]},
    68. 

  68. {"method":"lineTo","arguments":[108.571,112.2]},
    69. 

  69. {"method":"lineTo","arguments":[154.286,97.8]},
    70. 

  70. {"method":"lineTo","arguments":[200,88.8]},
    71. 

  71. // {"method":"lineTo","arguments":[245.714,61.8]},
    72. 

  72. {"method":"lineTo","arguments":[245.714,81.9]},
    73. 

  73. // {"method":"lineTo","arguments":[291.429,79.8]},
    74. 

  74. // {"method":"lineTo","arguments":[337.143,79.8]},
    75. 

  75. {"method":"stroke","arguments":[]}
    76. 

  76. 

  77. ]
    78. 

  78. 

  79. // -------------------------------------------------
    80. 

  80. 

  81. 

  82. 

  83. 

  84.     function doSet(ctx, stack) {
    85. 

  85.         stack.forEach(function (item, index) {
    86. 

  86.             if (item.method) {
    87. 

  87.                 if (item.method !== 'lastFail') {
    88. 

  88.                     ctx[item.method].apply(ctx, item.arguments);
    89. 

  89.                 }
    90. 

  90.             }
    91. 

  91.             else if (item.attr) {
    92. 

  92.                 ctx[item.attr] = item.val;
    93. 

  93.             }
    94. 

  94.         });
    95. 

  95.     }
    96. 

  96. 

  97.     var canvas = document.getElementById('main');
    98. 

  98.     canvas.width = 400;
    99. 

  99.     canvas.height = 300;
    100. 

  100. 

  101.     // stack = stack.slice(0, 357);
    102. 

  102.     // console.log(JSON.stringify(stack.slice(0, 357)));
    103. 

  103. 

  104. 

  105.     doSet(canvas.getContext('2d'), stack);
    106. 

  106. 

  107. 

  108. 

  109. 

  110. </script>
    111. 

  111. 

  112. 

  113. 

  114. 

  115. 

  116. 

  117. 

  118. 

  119. 

  120.     </body>
    121. 

  121. </html>
    122.