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

이번에는 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

    <canvas></canvas>

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는 여러 이미지 미리보기 업로드 및 클릭 가능한 드래그 컨트롤을 구현합니다

위 내용은 캔버스는 태극권 회전 애니메이션을 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!