HarmonyOS应用开发-三方组件太极图案例

主代码页，示例代码：

<div class="container">
    <div class="canvas-container">
        <canvas ref="ref_canvas" class="canvas" id="canvasId"/>
    </div>

</div>

/*index.css*/
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
/*    background-color: #5e7c85;*/
}

.canvas-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.canvas {
    width: 340px;
    height: 340px;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-left: 10px;
    margin-right: 10px;
}

@keyframes rotateAnim {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#canvasId {
    animation: rotateAnim 5s 0s linear infinite;
}

/*index.js*/
export default {
    data: {},
    onShow() {
        this.draw(170, 170);
    },
    draw(x, y) {
        const el = this.$refs.ref_canvas;
        var ctx = el.getContext('2d', {
            antialias: true
        });

        //半径
        let radius = 150;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
        ctx.stroke();
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.moveTo(x, y - radius);
        ctx.bezierCurveTo(x - radius, y - radius / 2, x + radius, y + radius / 2, x, y + radius);
        ctx.arc(x, y, radius, -(Math.PI / 180) * 270, (Math.PI / 180) * 270, true);
        ctx.closePath();
        ctx.fill();
        ctx.beginPath();
        ctx.arc(x, y + radius / 2, 20, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(x, y + -radius / 2, 20, 0, 2 * Math.PI, false);
        ctx.fill();
    }
}

案例效果：