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();
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.