Canvas creates animation of rotating Tai Chi-H5 Tutorial-php.cn

Canvas creates animation of rotating Tai Chi

php中世界最好的语言

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

Original

3118 people have browsed it

This time I will bring you how to use Canvas to create rotating Tai Chi animations. What are the precautions for making rotating Tai Chi animations using Canvas? The following is a practical case, let’s take a look.

Preface

I haven’t touched canvas for a long time. I suddenly wanted to review it this afternoon, so I wrote a rotating Tai Chi. Haha, it’s quite fun. I will write it here. The process of writing it by myself is shown. The rotation is implemented using css, not the canvas itself. I hope the bosses will not complain.

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

Copy after login

html

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

Copy after login

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

Copy after login

Effect

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!