index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>高级画板程序(canvas) - 授课系统</title>
  5. <link rel="stylesheet" href="css/index.css">
  6. </head>
  7. <body style="background-color: #E5E4E5;;overflow-x: hidden;">
  8. <div style="margin-top:10px;">
  9. <div style="width:50px;float:left;">
  10. <ul id="toolsul" class="tools">
  11. <li id="toolsPencil" data-type="pen" class="active">
  12. <i class="icon-tools icon-pen-select" data-default='icon-tools icon-pen-black'></i>
  13. </li>
  14. <li data-type="arrow">
  15. <i class="icon-tools icon-arrow-black" data-default='icon-tools icon-arrow-black'></i>
  16. </li>
  17. <li data-type="line">
  18. <i class="icon-tools icon-line-black" data-default='icon-tools icon-line-black'></i>
  19. </li>
  20. <li data-type="dottedline">
  21. <i class="icon-tools icon-dottedline-black" data-default='icon-tools icon-dottedline-black'></i>
  22. </li>
  23. <li data-type="circle">
  24. <i class="icon-tools icon-circle-black" data-default='icon-tools icon-circle-black'></i>
  25. </li>
  26. <li data-type="ellipse">
  27. <i class="icon-tools icon-ellipse-black" data-default='icon-tools icon-ellipse-black'></i>
  28. </li>
  29. <li class="hide" data-type="square">
  30. <i class="icon-tools icon-square-black" data-default='icon-tools icon-square-black'></i>
  31. </li>
  32. <li data-type="rectangle">
  33. <i class="icon-tools icon-rectangle-black" data-default='icon-tools icon-rectangle-black'></i>
  34. </li>
  35. <li data-type="rightangle">
  36. <i class="icon-tools icon-rightangle-black" data-default='icon-tools icon-rightangle-black'></i>
  37. </li>
  38. <li data-type="equilateral">
  39. <i class="icon-tools icon-equilateral-black" data-default='icon-tools icon-equilateral-black'></i>
  40. </li>
  41. <li class="hide" data-type="isosceles">
  42. <i class="icon-tools icon-isosceles-black" data-default='icon-tools icon-isosceles-black'></i>
  43. </li>
  44. <li data-type="text">
  45. <i class="icon-tools icon-text-black" data-default='icon-tools icon-text-black'></i>
  46. </li>
  47. <li data-type="remove">
  48. <i class="icon-tools icon-remove-black" data-default='icon-tools icon-remove-black'></i>
  49. </li>
  50. </ul>
  51. </div>
  52. <div id="canvasDiv" class="canvasDiv" style="width:95%;">
  53. <canvas id="c" width="1920" height="1080">请使用支持HTML5的浏览器</canvas>
  54. </div>
  55. </div>
  56. <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  57. <script src="https://cdn.bootcss.com/fabric.js/2.1.0/fabric.min.js"></script>
  58. <script src="js/demo.js"></script>
  59. <script src="js/canvasZoom.js"></script>
  60. </body>
  61. </html>