집 > 기사 > 웹 프론트엔드 > 캔버스에 만화경 효과를 구현한 예

캔버스에 만화경 효과를 구현한 예

高洛峰원래의: 2017-03-04 10:06:161491검색

캔버스에도 CSS3의 변환 기능이 있습니다. 변환의 기본 연산 방법은 선형 대수학에서 행렬을 사용하는 것이며, 행렬은 우리 일상 생활에서 자주 사용되는 복잡한 공간 문제를 제시할 수 있습니다. 아직 실용적인 측면이 많아 이해하지 못하는 사람은 어렵다고 느낄 것입니다. 이 지식은 꼭 필요합니다.

캔버스에 캡슐화된 변환 함수: scale(),rotate(),translate(),transform(),setTransform(); 숫자만 전달하면 되며 단위는 그렇지 않습니다. 또한 여기서 각도 단위는 라디안입니다. 이는 CSS와 setTransform() 모두 이 변환을 통해 메모리를 절약하고 오버레이하는 기능을 가지고 있습니다.

이러한 기능을 제거합니다. 즉, setTransform()을 사용하면 현재 환경의 크기 조정, 회전, 이동 및 기울일 수 있습니다.

사용 방법은 w3c의 매뉴얼을 확인하세요.

다음 렌더링:

캔버스에 만화경 효과를 구현한 예

코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
    body{   
        background: #eee;   
    }   
    canvas{   
        background: #fff;   
    }   
    </style>
</head>
<body>
    <canvas width="800" height="800"></canvas>
    <script>
    var oCas=document.getElementsByTagName("canvas")[0];   
    var cas=oCas.getContext("2d");   
    var arr=[];   

    /*绘制数据内容*/   
    setInterval(function(){   
        cas.clearRect(0,0,800,800);   
        for(var i=0;i<arr.length;i++){   
            cas.save();   
            cas.beginPath();   
            cas.translate(400,400);   
            cas.rotate(arr[i].num*Math.PI/180);   
            cas.scale(arr[i].num2,arr[i].num2);   
            cas.fillStyle=arr[i].color;   
            cas.rect(arr[i].num1,0,20,20);   
            cas.fill();   
            cas.restore();   
            if(arr[i].num1<=0){   
                arr.splice(i,1);   
            }else{   
                arr[i].num++;   
                arr[i].num2-=0.0015;   
                arr[i].num1-=0.4;   
            }   
        }   
    },60);   

    /*存储数据*/   
    setInterval(function(){   
        var obj={   
            "num":0,   
            "num1":300,   
            "num2":1,   
            "color":"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"   
        };   
        arr.push(obj);   
    },1000);   

    </script>
</body>
</html>

여러 그래픽을 출력하려면 먼저 배열을 사용하여 데이터를 저장한 다음 루프를 사용하여 데이터의 내용을 그릴 수 있습니다. 마지막으로 데이터 루프가 완료된 후 캔버스를 지우고 변환의 값 변경을 추가하면 애니메이션 효과를 얻을 수 있습니다.

위의 캔버스 만화경 효과의 간단한 구현(권장)은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

캔버스에 만화경 효과를 구현한 더 많은 예를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：CSS3 단일 페이지 전환 탐색 메뉴 인터페이스 디자인의 세부 구현다음 기사：CSS3 단일 페이지 전환 탐색 메뉴 인터페이스 디자인의 세부 구현

캔버스에 만화경 효과를 구현한 예

관련 기사