Heim > Artikel > Web-Frontend > Teilen Sie Beispiele für die Verwendung von Canvas zum Erstellen rotierender Tai Chi

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

小云云Original: 2018-03-12 09:52:021451Durchsuche

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

html

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3 implementiert eine flexible Box-ModellanwendungNächster Artikel：CSS3 implementiert eine flexible Box-Modellanwendung

In Verbindung stehende Artikel

Mehr sehen