Teilen Sie Beispiele für die Verwendung von Canvas zum Erstellen rotierender Tai Chi-CSS-Tutorial-php.cn

Teilen Sie Beispiele für die Verwendung von Canvas zum Erstellen rotierender Tai Chi

小云云

Freigeben： 2018-03-12 09:52:02

Original

1455 Leute haben es durchsucht

Ich habe die Leinwand heute Nachmittag nicht mehr berührt, also habe ich ein rotierendes Tai Chi geschrieben. Ich werde den Prozess des Schreibens hier zeigen wurde mit CSS implementiert, aber es hat nicht funktioniert. Ich hoffe, die Großen werden sich nicht beschweren. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Beispiel der Herstellung von rotierendem Tai Chi mit Canvas ein. Ich hoffe, er kann Ihnen helfen.

Vorwort

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

Nach dem Login kopieren

html

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Effekt

Verwandte Empfehlungen:

Leinwand zum Zeichnen von Grafiken mit der Maus

Verwendung So erstellen Sie eine Uhranimation mit Canvas

Ein Beispiel für die Verwendung von Canvas zum Erstellen einer Sperrfunktion in HTML5

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Verwendung von Canvas zum Erstellen rotierender Tai Chi. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!