Animation von rotierendem Tai Chi mit Canvas-H5-Tutorial-php.cn

Animation von rotierendem Tai Chi mit Canvas

php中世界最好的语言

Freigeben： 2018-03-20 13:46:58

Original

3134 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, wie Sie mit Canvas rotierende Tai-Chi-Animationen erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung rotierender Tai-Chi-Animationen mit Canvas?

Vorwort

Ich habe es heute Nachmittag plötzlich nicht mehr angerührt, also habe ich ein rotierendes Tai Chi geschrieben Es macht ziemlich viel Spaß, es hier zu schreiben. Ich hoffe, die Chefs werden sich nicht beschweren.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5-APP-Überwachung der Rückgabeereignisverarbeitung

h5 implementiert das Hochladen mehrerer Bilder in der Vorschau sowie Steuerungen per Klicken und Ziehen

Das obige ist der detaillierte Inhalt vonAnimation von rotierendem Tai Chi mit Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!