Maison > Article > interface Web > Partager des exemples d'utilisation de Canvas pour créer du Tai Chi rotatif
Partager des exemples d'utilisation de Canvas pour créer du Tai Chi rotatif
- 小云云original
- 2018-03-12 09:52:021414parcourir
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);
}
}html
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>js
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();Effet
Recommandations associées :
toile pour faire glisser la souris en dessinant des graphiques
utiliser Comment créer une animation d'horloge avec Canvas
Un exemple d'utilisation de Canvas pour créer une fonction de barrage en HTML5
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!