Há alguns dias, usei o estilo css e js para homenagear a interface semelhante do github404. Ao mesmo tempo, recentemente entrei em contato com o canvas. Com a ideia de brincar, usei o algoritmo js anterior para. use canvas para completar o efeito dinâmico do github404.
renderizações
Diretório de arquivos Recursos de arquivoO código-fonte do arquivo e as imagens são fornecidos no final do artigo
códigoA parte do corpo da página da web
Aqui, defina a largura e a altura da tela e defina-a como um elemento de nível de bloco. Essas tags img carregam essas imagens, então não precisamos carregá-las em js e, em seguida, definir as imagens para não exibirem display:none.
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> Seu navegador não suporta 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 estilo=display:none> <img src=./images/buliding_1.png estilo=display:none> <img src=./images/building_2.png style=display:none> </body>parte js
1. Aqui ainda criei um novo objeto json chamado github404 para encapsular todos os parâmetros e métodos.
2. Crie o objeto imgData novamente e passe todos os parâmetros necessários para img em ps:top e left para posicionamento no método drawImage(). O parâmetro scale é usado para calcular o movimento da imagem correspondente quando o mouse se move.
3. O método init() é usado para inicialização e é a interface com o exterior
4. A implementação do método de desenho consiste em usar um loop for in para percorrer imgData[], em seguida, atribuir valores em sequência e, finalmente, usar o método drawImage() para desenhar. você precisa prestar atenção ao usar o método ctx.clearRect() para limpar a tela primeiro.
<script> var github404 = { imgData: {//Registre as informações de todas as imagens como objetos json bg: { top: 0, left: 110,//top e left são usados para posicionamento, use src: './ images/ field.png',//Escala do caminho da imagem correspondente: 0,06,//Quando o mouse se move, a proporção do movimento correspondente da imagem}, building_2: { top: 133, left: 1182, src: './images/building_2.png', escala: 0,05, }, building_1: { topo: 79, esquerda: 884, src: './images/building_1.png', escala: 0,03, }, speeder_shadow : {superior: 261, esquerda: 776, src: './images/speeder_shadow.png', escala: 0,01, }, cat_shadow: { topo: 288, esquerda: 667, src: './images/cat_shadow.png', escala: 0,02, }, speeder: { topo: 146, esquerda: 777, src: './images/speeder.png', escala: 0,01, }, gato: { topo: 88, esquerda: 656, src: './images/cat.png', escala: 0,05, }, texto: { topo: 70, esquerda: 364, src: './images/text ' .png', escala: 0,03, }, }, taxa_w: 0, taxa_h: 0, // Proporção de deslocamento field_width: 1680, field_height: 370,//Altura e largura do plano de fundo canvas: document.querySelector('#mycanvas'),//Obter o elemento canvas init: function() {//Inicializar o método de carregamento this.setRateWH(); placeImg(); this.attachMouseEvent() }, setRateWH: function() {//Método para calcular a taxa de deslocamento var window_width = document.body.clientWidth; var window_height = document.body.clientHeight; this.rate_w = this.field_width/window_width; = this.canvas.getContext('2d');//Pegue o pincel para(digite this.imgData){//Percorre o objeto imageData var image = new Image() var left = this.imgData[key].left; [chave].src; ctx.drawImage(imagem,esquerda,topo, imagem.largura,imagem.altura); document.body.onmousemove = function(e){ that.picMove(e.pageX,e.pageY); picMove: function(pageX,pageY) {//Método para redesenhar quando o mouse se move, deixe ctx = this. canvas.getContext('2d'); this.imgData) { var imagem = new Image(); var offer_w = this.rate_w * pageX * this.imgData[key].scale; /Defina esquerda e superior e posicione os parâmetros ao desenhar abaixo var left = this.field_width/100 - offer_w + this.imgData[key].left; this.field_height/100 - offer_h + this.imgData[key].top; image.src = this.imgData[key].src; } } window.onload = function() { //Chame apenas o método init do github404 para encapsular os dados github404.init(); ResumirDessa vez usei o canvas para completar esse efeito dinâmico, o que me fez entender mais sobre o uso do canvas. me faça ao mesmo tempo
Tenho um conhecimento mais profundo do uso de objetos JSON para encapsular dados e métodos e como organizar código.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.