Partager des exemples d'utilisation de Canvas pour créer du Tai Chi rotatif-tutoriel CSS-php.cn

Partager des exemples d'utilisation de Canvas pour créer du Tai Chi rotatif

小云云

Libérer： 2018-03-12 09:52:02

original

1468 Les gens l'ont consulté

Je n'ai pas touché à la toile depuis longtemps. J'ai soudain eu envie de la revoir cet après-midi, alors j'ai écrit un Tai Chi en rotation, c'était assez amusant, je vais montrer le processus d'écriture ici. a été implémenté en utilisant CSS, mais cela n'a pas fonctionné propre à Canvas, j'espère que les grands ne se plaindront pas. Cet article vous présente principalement les informations pertinentes sur l'exemple de création de Tai Chi en rotation avec Canvas. J'espère que cela pourra vous aider.

Avant-propos

css

body{
    background: #ddd;
}
#canvas{
    position: absolute;
    left: 40%;
    top: 30%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: testAnimate 3s linear infinite;
    -o-animation: testAnimate 3s linear infinite;
    animation: testAnimate 3s linear infinite;
}
@keyframes testAnimate {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Copier après la connexion

html

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

Copier après la connexion

let ctx = document
    .getElementById("canvas")
    .getContext("2d");
// left-black-big
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// right-white-big
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// top-black-middle
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);
ctx.closePath();
ctx.fill();
// bottom-white-middle
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);
ctx.closePath();
ctx.fill();
// top-white-small
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(250,150,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();
// bottom-black-small
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(250,350,25,0,Math.PI*2);
ctx.closePath();
ctx.fill();

Copier après la connexion

Effet