자바 스 크 립 트 canvas 코드 비 효과 구현

3585 단어 jscanvas코드 비
본 논문 의 사례 는 canvas 가 코드 비 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도 를 먼저 보다

이 효과 도 는 예전 영화 속 해 킹 기술 과 매우 비슷 해서 보기 어렵 지만 사실은 조작 하기 가 매우 간단 하 다.
캔버스 는 사실 캔버스 라 는 뜻 이에 요.
일단 캔버스 가 있어 야 돼 요.

<body>
    <canvas id="canvas"></canvas>
</body>
이런 배경 을 하나 더 설정 해 주세요.
HTML 부분

<body>
    <canvas id="canvas"></canvas>
    <div></div>
</body>
CSS 부분

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }
        div{
            width: 480px;
            height: 280px;
            border-radius: 50%;
            background-image: url(img/     .jpg);
            position: absolute;
            top: calc(50% - 140px);
            left: calc(50% - 240px);
            z-index: 2;
            opacity: 0.4;
        }
</style>

뒤에 JS 파 트.
캔버스 하나,붓 하나,그리고 캔버스 에 너비 와 높이 를 주다.

<script>
 var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
</script>
자세 한 코드 는 다음 과 같 습 니 다.

<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    //             
    var fontsize = 16;
    //                        
    var count = width/fontsize;
    console.log(count);
    //             
    var arr = [];
    for(var i = 0; i < count; i++){
        arr.push(0);
        console.log(arr);
    }
    //           
    var stringarr = "I Love You"
    function show(){
    //    
        context.beginPath();
        context.fillRect(0,0,width,height);
        //   
        context.fillStyle = "rgba(0,0,0,0.05)";
        //     
        context.strokeStyle = "chartreuse";
        for(
            var i =0;
            i<arr.length;
            i++
        )
        {
            var x = i*fontsize;
            var y = arr[i]*fontsize;
            var index = Math.floor(Math.random()*stringarr.length);
            context.strokeText(stringarr[index],x,y);
            if(
                y >=height&&Math.random()>0.99
            ){
                arr[i]=0;
            }
            arr[i]++;
        }
        context.closePath();
    }
    show();//    
    var timer = setInterval(show,30);
</script>
부족 한 점 이 있 으 면 많이 지도 해 주세요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기