Hace unos días, utilicé el estilo CSS y JS para rendir homenaje a la interfaz similar de GitHub404. de GitHub404 a través del lienzo.
Representaciones
Directorio de archivos Recursos de archivoEl código fuente del archivo y la imagen se dan al final del artículo
CódigoEl cuerpo de la página web
Aquí hay un elemento bien definido y de alto nivel para el lienzo. Estas etiquetas IMG se cargan de estas imágenes, y no tenemos que cargarlas en JS, y luego establecer la imagen para mostrar: ninguna.
<Body> <Canvas ID = MyCanvas Width = 1680 Height = 630 Style = Margin: 0; Ninguno> <img src =./Image/text.png style = display: none> <img src =./Imágenes/cat.png style = Display: Ninguno> <img src =./Cat_shadow.png sty. : Ninguno> <img src =./Images/speeder.png style = display: none> <img src =./Images/speeder_shadow.png style = Display: Ninguno> <img src =./Images/bu Lididing_1.png Style = Display: Ninguno> <img src =./Images/edificio_2.png style = Display: Ninguno> </body>Parte js
1. Aquí todavía construí un nuevo objeto JSON llamado GitHub404 para encapsular todos los parámetros y métodos
2. Cree el objeto de IMGDATA y luego use los parámetros requeridos para todos los IMG en PS: superior e izquierda para posicionarse cuando se usa el método DrawImage (). El movimiento del ratón.
3. El método TheInit () se utiliza para inicializar, que es una interfaz con la interfaz externa
4. La implementación del método de dibujo es atravesar el imgData [] en un bucle en los ciclos, y luego asignar un valor a su vez. Preste atención al uso del método CTX.ClearRect () para borrar el lienzo primero esencia vacía vacía
<script> vargithub404 = {imgData: {// registra la información de todas las imágenes en los objetos JSON BG: {Top: 0, izquierda: 110, // arriba y izquierda para posicionar. Escala de ruta de imagen: 0.06, // Cuando se mueve el mouse, la proporción del movimiento correspondiente de la imagen}, edificio_2: {superior: 133, izquierda: 1182, src: './images/building_2 .png', escala: 0.05 ,}, Edificio_1: {superior: 79, izquierda: 884, src: './images/buliding_1.png', escala: 0.03,}, speeder_shadow: {arriba: 261, izquierda: 77666666666 ,, src: './images /speeder_shadow.png ', escala: 0.01,}, cat_shadow: {top: 288, izquierda: 667, src:' ./image_shadow.png ', escala: 0.02,}, spe eder: {top: 146, izquierda: 777: 777: 777 , src: './images/speeder.png', escala: 0.01,}, gato: {arriba: 88, izquierda: 656, src: './images/cale.png', escala: 0.05,}, texto: {Arriba: 70, izquierda: 364, src: './images/text.png', escala: 0.03,}, tasa_w: 0, tasa_h: 0, // sesgo offset field_width: 1680, field_heigh: 370, // el Altura de fondo y lienzo de ancho: document.QueerySelector ('#mycanvas'), // Obtener el elemento Canvas init: function () {// Método de carga inicializado this.se.se.se.se.se.se .Se.se.se.se.se.se.se traatewh (); Document.Body.Client Width; Ctx = this.canvas.getCon text ('2d'); ] .let; }, AdjunteMousEvent: function () {var the = this;时重新画图的方法 Sea ctx = this.canvas.getContext ('2d'); Imagen = nueva imagen (); arriba, coloque el parámetro al mismo tiempo. , Image.Width, Image.Height);}}} window.onload = function () {// Simplemente llame al método init de GitHub404 para encapsular los datos GitHub404.init ();} </script> ResumirEsta vez usando lienzo para completar este efecto dinámico, he aprendido más sobre el uso de lienzo. Hazme al mismo tiempo
Existe una comprensión más profunda de cómo organizar el código para los datos y métodos de empaque con el objeto JSON.
Lo anterior es todo el contenido de este artículo.