mask.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>蒙板示例</title>
  5. <meta charset="utf-8">
  6. <!-- 正式发布的时候, 只需替换掉相应的脚本文件即可 -->
  7. <!-- dev 版本 示例所需脚本文件 start -->
  8. <script src="../dev-lib/sea.js"></script>
  9. <script>
  10. seajs.config({
  11. base: '../src'
  12. });
  13. </script>
  14. <script src="../dev-lib/exports.js"></script>
  15. <script src="../dev-lib/dev-start.js"></script>
  16. <!-- dev 版本 示例所需脚本文件 end -->
  17. <!-- 正式版本 示例所需脚本文件 start -->
  18. <!--<script src="../dist/kitygraph.all.min.js"></script>-->
  19. <!-- 正式版本 示例所需脚本文件 end -->
  20. <script>
  21. window.onload = function () {
  22. var paper = new kity.Paper( document.body ),
  23. circle = new kity.Circle( 100, 200, 200 ),
  24. circleMask = new kity.Circle( 100, 200, 200 ),
  25. mask = new kity.Mask(),
  26. brush = new kity.LinearGradientBrush(),
  27. rect = new kity.Rect( 200, 100, 100, 100 );
  28. brush.addStop( '0', "white" );
  29. brush.addStop( '1', "black" );
  30. circleMask.fill( brush );
  31. mask.addShape( circleMask );
  32. circle.maskWith( mask );
  33. circle.fill( 'red' );
  34. paper.addResource( brush );
  35. paper.addResource( mask );
  36. paper.addShape( circle );
  37. };
  38. </script>
  39. </head>
  40. <body>
  41. </body>
  42. </html>