canvas-replay.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="lib/esl.js"></script>
  6. <script src="lib/config.js"></script>
  7. <script src="lib/jquery.min.js"></script>
  8. <script src="lib/facePrint.js"></script>
  9. <script src="ut/lib/canteen.js"></script>
  10. <script src="lib/testHelper.js"></script>
  11. <meta name="viewport" content="width=device-width, initial-scale=1" />
  12. <link rel="stylesheet" href="lib/reset.css">
  13. </head>
  14. <body>
  15. <style>
  16. h1 {
  17. line-height: 60px;
  18. height: 60px;
  19. background: #146402;
  20. text-align: center;
  21. font-weight: bold;
  22. color: #eee;
  23. font-size: 14px;
  24. }
  25. .chart {
  26. height: 500px;
  27. }
  28. </style>
  29. <canvas class="chart" id="main"></canvas>
  30. <script>
  31. var stack =
  32. // -------------------------------------------------
  33. [
  34. {"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":[]},
  35. {"method":"clip","arguments":[]},
  36. {"method":"setTransform","arguments":[1,0,0,1,0,0]},
  37. {"attr":"shadowBlur","val":10},
  38. {"attr":"shadowOffsetX","val":10},
  39. {"attr":"shadowOffsetY","val":10},
  40. {"attr":"shadowColor","val":"rgba(0,0,0,0.4)"},
  41. {"attr":"lineJoin","val":"bevel"},
  42. {"attr":"fillStyle","val":"none"},
  43. {"attr":"strokeStyle","val":"#999"},
  44. {"attr":"globalAlpha","val":1},
  45. {"attr":"lineWidth","val":3},
  46. {"method":"setTransform","arguments":[1,0,0,1,0,0]},
  47. {"method":"beginPath","arguments":[]},
  48. {"method":"moveTo","arguments":[62.857,92.4]},
  49. {"method":"lineTo","arguments":[108.571,112.2]},
  50. {"method":"lineTo","arguments":[154.286,97.8]},
  51. {"method":"lineTo","arguments":[200,88.8]},
  52. // {"method":"lineTo","arguments":[245.714,61.8]},
  53. {"method":"lineTo","arguments":[245.714,81.9]},
  54. // {"method":"lineTo","arguments":[291.429,79.8]},
  55. // {"method":"lineTo","arguments":[337.143,79.8]},
  56. {"method":"stroke","arguments":[]}
  57. ]
  58. // -------------------------------------------------
  59. function doSet(ctx, stack) {
  60. stack.forEach(function (item, index) {
  61. if (item.method) {
  62. if (item.method !== 'lastFail') {
  63. ctx[item.method].apply(ctx, item.arguments);
  64. }
  65. }
  66. else if (item.attr) {
  67. ctx[item.attr] = item.val;
  68. }
  69. });
  70. }
  71. var canvas = document.getElementById('main');
  72. canvas.width = 400;
  73. canvas.height = 300;
  74. // stack = stack.slice(0, 357);
  75. // console.log(JSON.stringify(stack.slice(0, 357)));
  76. doSet(canvas.getContext('2d'), stack);
  77. </script>
  78. </body>
  79. </html>