7d2f1c86355ccf3d25de31a7ea7d9843d84f28667b30b9e9f22b2bc4d0e7b770fd1be96ac934ad72be221c7b09534ba2124cf7019b3933c753911f924bf34c 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf8" />
  5. <title>delAllGraph</title>
  6. <style>
  7. html, body, #canvas {
  8. width: 100%;
  9. height: 100%;
  10. margin: 0px;
  11. padding: 0px;
  12. }
  13. </style>
  14. <script src="../../dist/crender.map.js"></script>
  15. </head>
  16. <body>
  17. <canvas id="canvas"></canvas>
  18. </body>
  19. <script>
  20. const { CRender, extendNewGraph } = window.CRender
  21. const render = new CRender(document.querySelector('#canvas'))
  22. const [w, h] = render.area
  23. function randomNum (minNum, maxNum) {
  24. switch (arguments.length) {
  25. case 1:
  26. return parseInt(Math.random() * minNum + 1, 10)
  27. case 2:
  28. return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  29. default:
  30. return 0
  31. }
  32. }
  33. const circles = new Array(100).fill(0).map(foo => render.add({
  34. name: 'circle',
  35. shape: {
  36. rx: randomNum(0, w),
  37. ry: randomNum(0, h),
  38. r: 10
  39. },
  40. style: {
  41. fill: '#ffee97',
  42. stroke: 'goldenrod',
  43. lineWidth: 2
  44. }
  45. }))
  46. function wait (time) {
  47. return new Promise(resolve => setTimeout(resolve, time))
  48. }
  49. async function start () {
  50. await wait(1000)
  51. render.delAllGraph()
  52. }
  53. start()
  54. </script>
  55. </html>