Canvasを使用した太極拳の回転アニメーション

php中世界最好的语言
リリース: 2018-03-20 13:46:58
オリジナル
3156 人が閲覧しました

今回はCanvasを使った太極拳の回転アニメーションを紹介します。Canvasを使って太極拳の回転アニメーションを作成する際の注意点を紹介します。

前書き

今日の午後、突然キャンバスに触れたくなったので、回転太極拳を書きました。笑 ここでは、書くプロセスとその内容を紹介します。回転に使用される CSS 実装です。はい、私自身は Canvas を使用していません。上司が文句を言わないことを祈ります。

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();
ログイン後にコピー

Effect

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです!

推奨読書:

H5 APP モニタリングリターンイベント処理

h5 は複数の画像プレビューアップロードとクリック可能なドラッグコントロールを実装します

以上がCanvasを使用した太極拳の回転アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート