Este artigo compartilha o princípio da implementação, o código de implementação e os problemas encontrados no processo de implementação da animação de tela para sua referência. O conteúdo específico é o seguinte
O princípio é apagar uma determinada imagem em um dispositivo móvel e exibir outra imagem, usando tela para implementá -la.
Se o usuário apagar manualmente, você precisará ouvir o Touchmove, o Toukend e outros eventos, calcular as coordenadas correspondentes e usar o ClearRect ou Rect do Canvas para desenhar arcos ou linhas para conseguir isso. No entanto, isso causará atraso nos telefones Androd.
O Canvas possui uma propriedade GlobalCoToPeation. O valor padrão dessa propriedade é fonte-over, ou seja, será sobreposta quando você se baseia nos pixels existentes. No entanto, existe outro atributo que é de destino, ou seja, ao exibir sua imagem de destino fora da imagem de origem, ou seja, ao desenhar com base nos pixels existentes, os pixels existentes na área que você desenharão serão definidos transparentes. Com esse atributo, significa que você não precisa usar uma série de funções como o clipe. Você pode apenas usar linhas grossas ou arcos. Isso reduzirá as chamadas para a API do ambiente de desenho, melhorará o desempenho e executará o Android muito mais suave.
Aqui está o meu código de apagamento :
Deixe requestanimationframe = window.requestanimationframe || Window.mozRequestanimationFrame || Window.WebkitRequestanimationFrame || window.msRequestanimationframe; vamos cancelanimaçãoframe = window.cancelanimationframe || window.mozcancelanimationframe; deixe a = 60; vamos canvascleaner = document.getElementById ('cas-1'); deixe ctxcleaner = canvacleaner.getContext ('2d'); let canvascleanerbox = documeryselector ('. canvascleanerbox.clientWidth * 2; canvaScLeaner.Height = canvaScLeanerBox.clientHeight * 2; canvascleaner.style.width = canvascleanerbox.clientwidth + 'px'; canvascleaner.style.Height; 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxxxpxxxxxxxxx-1080-1920.jpg' ;mgcleaner.onload = () => {let width = parseInt (canvascleaner.style.whle.whtth); w = canvascleaner.width*(imgcleaner.height/imgcleaner.width); ctxcleaner.drawimage (imgcleaner, 0, 0, canvascleaner.width, w); ctxcleaner.linecap = 'redond'; // A propriedade LineCap define ou retorna o estilo da tampa da linha no final da linha. ctxcleaner.LineJoin = 'Round'; ctxcleaner.LineWidth = 100; // Defina ou retorne a largura da linha atual ctxcleaner.globalComPoTeOperation = 'Destination-out';} Deixe drawline = (x1, y1, ctx) => {ctx.save (); ctx.BeginPath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); ctx.fill (); // Fill () Método preenche a imagem atual (caminho). A cor padrão é preta. ctx.restore ();};/* d Para apagar as coordenadas do ponto da área, os dados que obtive simulando as formas que precisam ser apagadas por mim são semelhantes aos seguintes: Seja d2 = [ [1.190], [30.180], [60.170], [90,168], [120,167], [150,165], [180,164], [210,163], [240,160], [270,159], [300,164], [240,160], [270,159], [300,163], [240,160], [270,159], [300,163], [240,160], [270,159], [300,163], [240,160], [270,159], [300,163], [240,160], [270,159], [300,163], [240,160]. [390,150], [420,140], [450,130], [480,120], [510,120], [540,120], [570,120], [600,120], [630,120], [660,120], [600,120], [630,120], [660,120], [690,120], [720,120], [1.190], [20.189], [28.186], [45,185], [50.185], [62,184], [64,182], [90,180], [120,178], [160,176], [200,174], [240,172];*/let draw = (d, ctx) => {if (idx> = d.length) {cancelanimationframe (ts); } else {drawline (d [idx] [0], d [idx] [1], ctx); idx ++; requestanimationframe (() => {draw (d, ctx);}); }}Porque eu exibo a animação apagada diretamente na página e não exige que o usuário a limpe, de modo que as coordenadas da área de apagamento são calculadas por mim. Em seguida, use o requestanimationframe para implementar a animação. Comecei a usar o setInterval. Descobri que o setInterval sempre será confuso depois, por isso é recomendável não usar o setInterval.
No processo de alcançar esse efeito, descobri que, ao usar a tela para desenhar na página, a imagem se torna muito embaçada?
Acontece que é porque existe uma propriedade DevicePixelratio na variável da janela do navegador, que determina que o navegador usará vários pontos de pixel (geralmente 2) para renderizar um pixel. Ou seja, assumindo que o valor do dispositivoPixelratio é 2, uma imagem com um tamanho de 100*100 pixels será renderizada com a largura de 2 pixels na figura. Portanto, a imagem realmente ocupará 200*200 pixels na tela da retina, o que é equivalente à imagem que está sendo ampliada duas vezes, para que a imagem fique embaçada.
Dessa forma, o problema sobre tela será facilmente resolvido. Podemos tratar a tela como uma imagem. Quando o navegador renderiza a tela, ele usará a largura de 2 pixels para renderizar a tela, para que a imagem ou texto desenhado fique embaçado na maioria dos dispositivos de retina.
Da mesma forma, há também uma propriedade WebKitbackingStorePixelratio (apenas Safari e Chrome) no contexto da tela. O valor desta propriedade determina que o navegador usará vários pixels para armazenar informações de tela antes de renderizar a tela. O valor no Safari sob iOS6 é 2. Portanto, se uma imagem de 100*100 for desenhada no Safari, a imagem gerará primeiro uma imagem de 200*200 na memória e, quando o navegador a renderizar, ela a renderá como uma imagem de 100x100, para que não haja 200x200, que eu é exatamente a mesma imagem na memória, não haverá uma imagem de 100x100, não há mais de 200x200, que é a mesma imagem na memória, não haverá uma imagem de 100x100, que não é a mesma imagem na memória, não há uma imagem, que não haverá uma imagem, que não se tornará a mesma imagem na memória, que não haverá uma imagem de 100x100, que não se tornará a mesma imagem, que não é a mesma imagem na memória. No entanto, há distorção no Safari no Chrome e iOS7. O motivo é que os valores WebkitbackingStorePixelratio de Safari no Chrome e iOS7 são 1.
Solução:
canvas.width = canvasbox.clientWidth * 2; canvas.Height = canvasbox.clientHeight * 2; canvas.style.width = canvas.clientwidth + 'px'; // console.log (w); ctx.drawimage (img, 0, 0, canvas.width, w);
Ou seja, você pode criar uma tela com o dobro do tamanho real e, em seguida, usar o estilo CSS para limitar a tela ao tamanho real. Ou use esse poli -preenchimento no Github, mas eu tentei e ele não parece funcionar.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.