A few days ago, I used the CSS style and JS to pay tribute to the similar interface of Github404. At the same time, I recently contacted Canvas. Based on the idea of blind toss, I used Canvas to complete the dynamic effect of GitHub404 through Canvas.
Renderings
File directory File resourcesThe file source code and the picture are given at the end of the article
CodeThe body of the webpage
Here is a well -defined and high -level element for Canvas. These IMG tags are loaded out of these pictures, and we do not have to load them in JS, and then set the picture 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 =./Cat_Shadow.png Sty. le = Display : NONE> <IMG SRC =./Images/Speeder.png style = Display: None> <IMG SRC =./Images/Speeder_shadow.png Style = Display: None> <IMG SRC =./Images/BU liding_1.png style = Display: NONE> <IMG SRC =./Images/Building_2.png style = Display: None> </body>JS part
1. Here I still built a new JSON object called GitHub404 to encapsulate all parameters and methods
2. Create the object of IMGData, and then use the parameters required to all IMG into PS: TOP and Left for positioning when the drawImage () method. SCALE parameter is used to calculate the calculation of the corresponding picture of the mouse movement when moving the mouse movement.
3. Theinit () method is used to initialize, which is an interface with the external interface
4. The implementation of the drawing method is to traverse the imgdata [] in a loop in the cycles, and then assign a value in turn. Finally, the drawImage () method is painted, but in the mobile drawing method, you need to pay attention to the use of the ctx.clearrect () method to clear the canvas first empty empty Essence
<script> vargithub404 = {imgdata: {// records the information of all pictures in JSON objects BG: {TOP: 0, LEFT: 110, // TOP, and left for positioning. Images/Field.png ', // Corresponding picture path scale: 0.06, // When the mouse moves, the proportion of the corresponding movement of the picture}, 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: 7766666666 ,, src: './images/speeder_shadow.png', Scale: 0.01,}, Cat_Shadow: {TOP: 288, Left: 667, SRC: './image_Shadow.png', Scale: 0.02,}, SPE Eder: { TOP: 146, left: 777, src: './images/speeder.png', scale: 0.01,}, cat: {TOP: 88, Left: 656, SRC: './images/cAle.png', scale : 0.05,}, Text: {Top: 70, Left: 364, SRC: './images/text.png', Scale: 0.03,}, Rate_w: 0, Rate_h: 0, // Bias offset FIELD_WIDTH: 1680, Field_heigh: 370, // The background height and width canvas: document.queeryselector ('#mycanvas'), // Get the Canvas element init: function () {// initialized loading method This.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE.SE traatewh (); this. Placeimg (); this.attachmouseevent ();}, setraatewh: function () {// The method of calculating the offset ratio var Window_width = Document.body.client Width; VAR WINDOW_HEIGHT = document.body.clitingheight; this.raate_w = this. FIELD_WIDTH/WINDOW_WIDTH; this.raate_h = this.field_height/Window_height;}, Placeimg: Function () {// Initialized drawing method Let CTX = This.canvas.GetCon text ('2d'); // Get the brush for (key in this.imgdata) {// traversing the imagedata object var image = new image (); var left = this.imgdata [key] .let; var top = this.imgdata [key] .top; image.src = th is.imgdata [ Key] .src; ctx.DrawImage (Image, left, TOP, Image.width, Image.head);}}, AttachmouseEvent: function () {var the = this; .onmousemove = function (e) {that .picMove(e.pageX,e.pageY); } }, picMove: function(pageX,pageY) {//鼠标移动时重新画图的方法let ctx = this.canvas.getContext('2d'); ctx.clearRect (0,0, this.canvas.width, this.canvas.head); for (key in this.imgdata) {var Image = new image (); var offer_w = this.raate_w * pagex * this.imgd ATA [Key] .scale; Var offer_h = this.raate_h * pagey * this.imgdata [key] .scale; // Define the left and top, position the parameter when drawing below. mgdata [key ] .let; VAR TOP = this.Field_height/100 -OFFER_H + this.imgdata [key] .top; image.src = this.imgdata [key] .src; TOP, Image.Width , Image.Height);}}} Window.onload = Function () {// Just call the init method of github404 to encapsulate data github404.init ();} </script> SummarizeThis time using Canvas to complete this dynamic effect, I have learned more about the usage of Canvas. Make me at the same time
There is a deeper understanding of how to organize the code for packaging data and methods with the JSON object.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.