Sample code of dynamic effect of github404 implemented by canvas

Time:2019-10-7

A few days ago, I paid tribute to the similar interface of GitHub 404 with CSS style and js. At the same time, I recently contacted canvas. In the light of the blind idea, I used the previous JS algorithm to complete the dynamic effect of GitHub 404 with canvas.

Design sketch

File directory

File resources

File source code and pictures are given at the end of the article.

Code

Body section of the Web page

Here we define the width and height of canvas as block-level elements. These img tags load these pictures, so we don’t need to load them in js, and then set them to display: none.

<body>
    <canvas id="mycanvas" width="1680" height="630"
        style="margin:0;display:block">
            Your browser does not support 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>

Part JS

1. Here I also created a new JSON object named github404 to encapsulate all parameters and methods.

2. Create the object of imgData. Pass all the parameters of img into ps: top and left to locate when drawing Image () method. Scale parameter is used to calculate the corresponding picture movement when mouse moves.

3. The init () method is used for initialization and is an external interface.

4. The implementation of drawing method is to traverse imgData [], then assign values in turn, and finally draw with drawImage () method. Only in moving drawing method, we need to pay attention to the use of ctx. cleart () method to empty the canvas first.

<script>
        var github404 = {
            ImgData: {// Record all picture information with JSON object
                bg: {
                    top: 0,
                    Left: 110, //top and left are used for positioning and for drawing.
                    Src:'. / images / field. png', // corresponding picture path
                    Scale: 0.06, // Mouse movement, the corresponding proportion of the image movement
                },
                building_2: {
                    top: 133,
                    left: 1182,
                    src: './images/building_2.png',
                    scale: 0.05,
                },
                building_1: {
                    top: 79,
                    left: 884,
                    src: './images/buliding_1.png',
                    scale: 0.03,
                },
                speeder_shadow: {
                    top: 261,
                    left: 776,
                    src: './images/speeder_shadow.png',
                    scale: 0.01,
                },
                cat_shadow: {
                    top: 288,
                    left: 667,
                    src: './images/cat_shadow.png',
                    scale: 0.02,
                },
                speeder: {
                    top: 146,
                    left: 777,
                    src: './images/speeder.png',
                    scale: 0.01,
                },
                cat: {
                    top: 88,
                    left: 656,
                    src: './images/cat.png',
                    scale: 0.05,
                },
                text: {
                    top: 70,
                    left: 364,
                    src: './images/text.png',
                    scale: 0.03,
                },
            },
            rate_w: 0,
            Rat_h: 0, // offset ratio
            field_width: 1680,
            Field_height: 370, // background height and width
            Canvas: document. querySelector ('# mycanvas'), // Get the canvas element

            Init: function () {// initialization loading method
                this.setRateWH();
                this.placeImg();
                this.attachMouseEvent();
            },
            SetRateWH: Function () {// Method of calculating migration ratio
                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;
            },

            Placement Img: Drawing Method for Function () {// Initialization
                Let CTX = this. canvas. getContext ('2d'); // Get the brush
                For (key in this. imgData) {// traverse the imageData object
                    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) {// Mouse Redrawing Method
                let ctx = this.canvas.getContext('2d');
                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;
                    // Define left and top, and position the parameters when drawing the following
                    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() {
            // Only the init method of github404 is invoked to encapsulate the data
            github404.init();
        }
    </script>

summary

The use of canvas to achieve this dynamic effect, so that I know more about the use of canvas. And make me

For using JSON objects to encapsulate data and methods, there is a deeper understanding of how to organize code.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.