캔버스는 태극권 회전 애니메이션을 생성합니다.-H5 튜토리얼-php.cn

캔버스는 태극권 회전 애니메이션을 생성합니다.

php中世界最好的语言

풀어 주다： 2018-03-20 13:46:58

원래의

3169명이 탐색했습니다.

이번에는 Canvas를 이용한 회전 태극권 애니메이션을 가져오겠습니다. Canvas를 사용하여 회전 태극권 애니메이션을 만들 때의 주의 사항은 무엇입니까?

서문

오랫동안 캔버스를 만지지 않았는데 오늘 오후에 갑자기 복습하고 싶어서 회전태극권을 써봤습니다. ㅎㅎ 꽤 재미있네요. 회전에 사용되는 CSS 구현입니다. 저는 캔버스를 직접 사용하지 않았습니다. 상사가 불평하지 않기를 바랍니다.

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

로그인 후 복사

Effect