O canvas recém-adicionado do Html5 é uma função poderosa. Estima-se que todo mundo o use todos os dias, mas a frequência não é alta. confuso, então o desenho de tela comumente usado, o desenho de texto, a função salvar foi encapsulada e atualmente estou bastante satisfeito com ela. Ele pode concluir rapidamente as tarefas de desenho de tela e responder com calma às mudanças nos requisitos.
li-canvas.jsA função de tela do Html5 é encapsulada para facilitar funções como imagem única, desenho de várias imagens, desenho de imagem com cantos arredondados, desenho de texto com várias linhas, quebra automática de linha, salvamento e download de imagens, etc.
Endereço do Github: github.com/501351981/l…
Funções principais• Desenho de imagem: desenho de imagem única/múltipla imagem, desenho de imagem com cantos arredondados • Desenho de texto: desenho de texto com vários parágrafos, quebra automática de linha: obtenção de dados de imagem, download de imagens para o local e suporte a nomes de imagens baixados personalizados. .
instalação npm#npm install npm install --save li-canvascotação direta
Importe arquivos js diretamente para html.
<script src=dist/li-canvas.js></script>Como usar Instanciar
Ao usar li-canvas, você precisa primeiro instanciar o objeto, new LiCanvas(canvas_id,options), passar o id da tela, as opções são opcionais, você pode definir o plano de fundo da tela e o estilo de texto padrão, etc.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= new LiCanvas('teste') </script></body> ... Desenho de imagem•Desenhe uma única imagem
Chame addDrawImageTask(image), onde o parâmetro image é um objeto, incluindo
src: endereço URL da imagem
x: A coordenada x do canto superior esquerdo da imagem na tela
y: A coordenada y do canto superior esquerdo da imagem na tela
largura: largura do desenho da imagem
altura: altura do desenho da imagem
borderRadius: raio do canto da imagem
Quando addDrawImageTask(image) é chamado, a imagem não é desenhada imediatamente, mas uma tarefa de desenho é adicionada. A tarefa de desenho só é executada quando draw(callback) é chamada, e a função de retorno de chamada é chamada quando a execução é concluída.
Por que fazer isso? Como a imagem precisa ser baixada primeiro durante o desenho, esta é uma operação assíncrona, portanto, ela é adicionada primeiro à lista de tarefas e, quando draw() é chamado, é executado na ordem em que as tarefas são adicionadas.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//ou o endereço url da imagem x:0,//coordenada x do canto superior esquerdo y:0,//coordenada y do canto superior esquerdo largura do canto:1563,/ /Largura do desenho da imagem altura:1180,//Altura do desenho da imagem borderRadius:0 //Raio do canto da imagem} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Adiciona uma tarefa de desenho e o desenho não é executado imediatamente canvas.draw(()=>{ console.log(desenho concluído) }) </script></body> ...•Desenhe vários gráficos
Você pode chamar addDrawImageTask(image) várias vezes seguidas ou pode passar uma matriz de imagens.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, largura:1563, altura:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, largura: 1563, altura:1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, largura:100, altura:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, largura:100, altura:100, borderRadius:0 } ] var canvas=new LiCanvas('teste') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //Múltiplas chamadas para obter desenho de múltiplas imagens canvas.addDrawImageTask(imgs) //Desenho de múltiplas imagens também pode ser obtido passando diretamente em um array canvas.draw(()=>{ console.log(desenho concluído) }) </script> </body> ...•Desenhe imagens arredondadas ou circulares
Basta definir borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, largura:100, altura:100, borderRadius:50 //Defina o raio do filete Quando o raio do filete é metade do comprimento lateral do quadrado, é um círculo} var canvas=new LiCanvas('test') canvas .addDrawImageTask(img1) canvas.draw(()=>{ console.log(desenho concluído) }) </script></body> ... Desenhar texto•Desenhe um texto
Chame addDrawTextTask(text,style)
texto: texto a ser desenhado
estilo: estilo do texto, incluindo x: coordenada x do canto superior esquerdo da posição inicial do desenho do texto
y: A coordenada y do canto superior esquerdo da posição real do desenho do texto
Largura: A largura de uma linha de texto. Se exceder a largura, ela será quebrada automaticamente.
fontSize: tamanho do texto, número inteiro, unidade é px
fontWeight: espessura do texto em negrito, mais negrito, etc. ou 400, 500, 600... igual ao peso da fonte css
fontFamily: fonte do texto, igual ao css
lineHeight: altura da linha, número inteiro, unidade px
cor: cor
marginBottom: se houver vários parágrafos de texto, você também pode especificar a distância entre os parágrafos
O desenho de texto também é assíncrono. Na verdade, não é desenhado até que draw(callback) seja chamado.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(texto a ser desenhado, { x:110, y:496, largura:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, cor:'#1a1a1a', margemInferior:40 }) canvas.draw(()=>{ console.log(desenho concluído) }) </script></body> ...•Desenhe vários parágrafos de texto
Método 1: chame repetidamente addDrawTextTask (texto, estilo), igual ao acima
Método 2: o texto pode ser passado em um array e o estilo pode ser compartilhado
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask([Parágrafo de texto a ser desenhado 1, Parágrafo de texto a ser desenhado 2],{ x:110, y:496, largura:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(desenho concluído) }) </script></body> ...O estilo também pode passar um valor padrão quando o objeto é instanciado para evitar a configuração repetida de alguns estilos compartilhados.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (parágrafo de texto a ser desenhado 1,{ x:110, y:496, largura:1340, }) canvas.addDrawTextTask(Parágrafo de texto a ser desenhado 2,{ x:110, y:696, largura:1340, }) canvas.draw(()=>{ console.log(desenho concluído) }) </script></ corpo> ...Se houver um parágrafo de texto em vários parágrafos que precise ser definido em estilos diferentes, você também pode especificar o estilo separadamente, como segue, é muito flexível ~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:To Texto do parágrafo desenhado 1, fontSize: 60 }, texto do parágrafo 2 a ser desenhado, texto do parágrafo 3 a ser desenhado],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log(desenho concluído) }) </script></body> ...Salvar imagem de download
•Baixar fotos
Baixe como imagem png: saveToPng (nome do arquivo)
Baixe como imagem jpeg: saveToJpeg (nome do arquivo)
Baixe como imagem GIF: saveToGif (nome do arquivo)
Nota: O download de imagens deve ser chamado na função de retorno de chamada draw() para ter efeito.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, largura:1563, altura:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script </corpo> ...•Obter dados de imagem
Às vezes, não queremos baixar a imagem. Por exemplo, no navegador WeChat, queremos que o usuário mantenha a imagem pressionada para salvá-la. Neste momento, queremos que os dados da imagem sintetizados pelo canvas sejam inseridos. o src da img.
Chame: getImageData() para obter os dados da imagem sintetizada
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px vermelho sólido></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, largura:1563, altura:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...Endereço do Github: github.com/501351981/l…
ResumirO texto acima é o que o editor apresenta a você, como realizar facilmente imagens únicas, múltiplas imagens, desenhos de imagens com cantos arredondados, texto de linha única, texto de várias linhas, etc. em HTML5 por meio do li-canvas. para você. Se você tiver alguma dúvida, deixe-me uma mensagem e responderei a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!