17e1a1b0054c391c47249f7936e8863e7c965206d6dbd235b4a8af47316b8b28f8a5a59c9f41d38fa646a90700777c7d4a805eae579ae13caa9fef5a89acb9 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf8" />
  5. <title>delGraph</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. const circle = render.add({
  24. name: 'circle',
  25. animationCurve: 'easeOutCubic',
  26. animationFrame: 50,
  27. drag: true,
  28. hover: true,
  29. shape: {
  30. rx: w / 2,
  31. ry: h / 2,
  32. r: 100
  33. },
  34. style: {
  35. fill: '#ffee97',
  36. stroke: 'goldenrod',
  37. lineWidth: 2
  38. }
  39. })
  40. function wait (time) {
  41. return new Promise(resolve => setTimeout(resolve, time))
  42. }
  43. async function start () {
  44. await wait(1000)
  45. render.delGraph(circle)
  46. }
  47. start()
  48. </script>
  49. </html>