집 >웹 프론트엔드 >H5 튜토리얼 >캔버스가 github404 역학을 구현하는 방법

캔버스가 github404 역학을 구현하는 방법

php中世界最好的语言원래의: 2018-01-30 09:21:342313검색

이번에는 캔버스로 github404 다이나믹스를 구현하는 방법과, 캔버스를 사용하여 github404 다이나믹스를 구현할 때 주의사항은 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.

며칠 전 github404의 비슷한 인터페이스에 경의를 표하기 위해 CSS 스타일과 JS를 사용했습니다. 동시에 최근에는 장난칠 생각으로 이전 JS를 사용하게 되었습니다. github404의 동적 효과를 완성하기 위해 캔버스를 사용하는 알고리즘입니다.

파일 리소스

파일 소스 코드와 이미지는 글 마지막에 있습니다

code

웹 페이지의 본문 부분

여기서 캔버스의 너비와 높이를 정의하고 블록으로 설정합니다. -레벨 요소. 이러한 img 태그는 이러한 이미지를 로드하므로 js에서 해당 이미지를 로드한 다음 이미지가 표시되지 않도록 설정할 필요가 없습니다(display:none).

<body>
    <canvas id="mycanvas" width="1680" height="630"
        style="margin:0;display:block">
            您的浏览器不支持canvas
    </canvas>
    <img src="./images/field.png" style="display:none">
    <img src="./images/text.png" style="display:none">
    <img src="./images/cat.png" style="display:none">
    <img src="./images/cat_shadow.png" style="display:none">
    <img src="./images/speeder.png" style="display:none">                       
    <img src="./images/speeder_shadow.png" style="display:none">           
    <img src="./images/buliding_1.png" style="display:none">
    <img src="./images/building_2.png" style="display:none"> 
 </body>

js part

1. 여기서는 모든 매개변수와 메소드를 캡슐화하기 위해 github404라는 새 json 객체를 생성했습니다. imgData 객체를 생성하고 ps:top에 img Pass에 필요한 모든 매개변수를 추가합니다. drawImage() 메소드에서 위치 지정. scale 매개변수는 마우스가 움직일 때 해당 이미지의 움직임을 계산하는 데 사용됩니다.

3. init() 메소드는 초기화에 사용되며

4 구현입니다. 그리기 방법 중 for in 루프를 사용하여 imgData[]를 순회한 다음 순서대로 값을 할당하고 마지막으로 drawImage() 메서드를 사용하여 그리는 것입니다. 그러나 모바일 그리기 방법에서는 주의할 필요가 있습니다. 먼저 캔버스를 지우려면 ctx.clearRect() 메서드를 사용하세요.

<script>
        var github404 = {
            imgData: {//将所有图片的信息用json对象记录
                bg: {
                    top: 0,
                    left: 110,//top和left用于定位，在画图时使用
                    src: &#39;./images/field.png&#39;,//对应图片路径
                    scale: 0.06,//鼠标移动时，该图片所对应移动的比例
                },
                building_2: {
                    top: 133,
                    left: 1182,
                    src: &#39;./images/building_2.png&#39;,
                    scale: 0.05,
                },
                building_1: {
                    top: 79,
                    left: 884,
                    src: &#39;./images/buliding_1.png&#39;,
                    scale: 0.03,
                },
                speeder_shadow: {
                    top: 261,
                    left: 776,
                    src: &#39;./images/speeder_shadow.png&#39;,
                    scale: 0.01,
                },
                cat_shadow: {
                    top: 288,
                    left: 667,
                    src: &#39;./images/cat_shadow.png&#39;,
                    scale: 0.02,
                },
                speeder: {
                    top: 146,
                    left: 777,
                    src: &#39;./images/speeder.png&#39;,
                    scale: 0.01,
                },
                cat: {
                    top: 88,
                    left: 656,
                    src: &#39;./images/cat.png&#39;,
                    scale: 0.05,
                },
                text: {
                    top: 70,
                    left: 364,
                    src: &#39;./images/text.png&#39;,
                    scale: 0.03,
                },
            },
            rate_w: 0,
            rate_h: 0,//偏移的比例
            field_width: 1680,
            field_height: 370,//背景高度和宽度
            canvas: document.querySelector(&#39;#mycanvas&#39;),//获得canvas元素
 
            init: function() {//初始化加载方法
                this.setRateWH();
                this.placeImg();
                this.attachMouseEvent();
            },
            setRateWH: function() {//计算偏移比的方法
                var window_width = document.body.clientWidth;
                var window_height = document.body.clientHeight;
                this.rate_w = this.field_width/window_width;
                this.rate_h = this.field_height/window_height;
            },
 
            placeImg: function() {//初始化的绘图方法
                let ctx = this.canvas.getContext(&#39;2d&#39;);//获得画笔
                for(key in this.imgData){//遍历imageData 对象
                    var image = new Image();
                    var left = this.imgData[key].left;
                    var top = this.imgData[key].top;   
                    image.src = this.imgData[key].src;
                    ctx.drawImage(image,left,top,
                        image.width,image.height);
                }
 
            },
 
            attachMouseEvent: function() {
                var that = this;
                document.body.onmousemove = function(e){
                    that.picMove(e.pageX,e.pageY);
                }
            },
            picMove: function(pageX,pageY) {//鼠标移动时重新画图的方法
                let ctx = this.canvas.getContext(&#39;2d&#39;);
                ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
                for(key in this.imgData) {
                    var image = new Image();
                    var offer_w = this.rate_w * pageX * this.imgData[key].scale;
                var offer_h = this.rate_h * pageY * this.imgData[key].scale;
                    //定义 left和top,下面画图时给参数定位
                    var left = this.field_width/100 - offer_w + this.imgData[key].left;
                    var top = this.field_height/100 - offer_h + this.imgData[key].top;
                    image.src = this.imgData[key].src;
                    ctx.drawImage(image,left,top,
                        image.width,image.height);
                }
            }
        }
 
        window.onload = function() {
            //只调用github404的init方法 封装了数据
            github404.init();
        }
    </script>

Summary

이번에는 캔버스를 사용하여 역동적인 효과를 완성했는데, 캔버스의 사용법에 대해 더 많이 이해하게 되었습니다. 동시에 json 객체를 사용하여 데이터와 메서드를 캡슐화하는 방법과 코드를 구성하는 방법에 대해 더 깊이 이해하게 되었습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!