返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-三方组件太极图案例

李洋水蛟龙
2022-02-25 10:04:51
阅读量0
0
0
1.png

主代码页，示例代码：
  1. /*index.nml*/
  2. <div class="container">
  3.     <div class="canvas-container">
  4.         <canvas ref="ref_canvas" class="canvas" id="canvasId"/>
  5.     </div>

  7. </div>

  9. /*index.css*/
  10. .container {
  11.     flex-direction: column;
  12.     justify-content: center;
  13.     align-items: center;
  14.     height: 100%;
  15. /*    background-color: #5e7c85;*/
  16. }

  18. .canvas-container {
  19.     flex-direction: column;
  20.     justify-content: center;
  21.     align-items: center;
  22.     height: 100%;
  23.     width: 100%;
  24. }

  26. .canvas {
  27.     width: 340px;
  28.     height: 340px;
  29.     justify-content: center;
  30.     align-items: center;
  31.     align-content: center;
  32.     margin-left: 10px;
  33.     margin-right: 10px;
  34. }

  36. @keyframes rotateAnim {
  37.     from {
  38.         transform: rotate(0deg);
  39.     }
  40.     to {
  41.         transform: rotate(360deg);
  42.     }
  43. }

  45. #canvasId {
  46.     animation: rotateAnim 5s 0s linear infinite;
  47. }

  49. /*index.js*/
  50. export default {
  51.     data: {},
  52.     onShow() {
  53.         this.draw(170, 170);
  54.     },
  55.     draw(x, y) {
  56.         const el = this.$refs.ref_canvas;
  57.         var ctx = el.getContext('2d', {
  58.             antialias: true
  59.         });

  61.         //半径
  62.         let radius = 150;
  63.         ctx.beginPath();
  64.         ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  65.         ctx.stroke();
  66.         ctx.fillStyle = 'black';
  67.         ctx.beginPath();
  68.         ctx.moveTo(x, y - radius);
  69.         ctx.bezierCurveTo(x - radius, y - radius / 2, x + radius, y + radius / 2, x, y + radius);
  70.         ctx.arc(x, y, radius, -(Math.PI / 180) * 270, (Math.PI / 180) * 270, true);
  71.         ctx.closePath();
  72.         ctx.fill();
  73.         ctx.beginPath();
  74.         ctx.arc(x, y + radius / 2, 20, 0, 2 * Math.PI, false);
  75.         ctx.fill();
  76.         ctx.fillStyle = 'white';
  77.         ctx.beginPath();
  78.         ctx.arc(x, y + -radius / 2, 20, 0, 2 * Math.PI, false);
  79.         ctx.fill();
  80.     }
  81. }
复制代码

案例效果：
附件：


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友