Pesquisar na Comunidade
Mostrando resultados para as tags ''canvas''.
Encontrado 16 registros
-
Como posso animar um Canvas com javascript? Preciso criar um animação no canvas que crie "ondas". Algo como: https://cdn.dribbble.com/users/636156/screenshots/1904130/fluid_drop_loading.gif
-
Oii, podem me ajudar eu fiz o seguinte <script> function start(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); save = canvas.ToDataURL(); a = document.getElementById("a"); setInterval(function(){ a.href = save; },500); } </script> <body onload="start();"> <canvas id="canvas"></canvas> <a id="a" href="#" download="image.jpg">Download</a> </body> Esse código é só um exemplo simplificado mas eu aperto salvar e salva a Canvas só que o fundo fica preto se tiver jpg e transparente se for png Eu já mudei o fundo da Canvas e não funciona o mesmo resultado sempre Se puder me ajudar agradeço
-
Fizemos vídeos que mostram o básico para fazer algo em Canvas, segue a playlist em que serão colocados os vídeos: As datas de lançamento de cada vídeo são: 23/04 – Introdução O que pode ser feito com Canvas e como colocar um objeto Canvas no HTML 25/04 – Desenhar Comandos básicos para conseguir fazer algo no Canvas 27/04 – Coordenadas Como posicionar os objetos 28/04 – Gradiente Como utilizar o efeito de gradiente 29/04 – Texto Como colocar texto 30/04 – Imagem Como colocar imagem Todos os vídeos serão lançados nos dias informados às 12:00 PS: Esses vídeos são sobre o básico de Canvas, serão feitos mais com base na repercussão que esses vídeo tiverem
-
Gostaria de saber como eu posso fazer um script, quero que o script funcione mais ou menos assim. Vou colocar a imagem salva do google maps, após autenticar no sistema o administrador poderá criar pontos naquela imagem, criando uma área sob o mapa. Como que eu posso fazer isso e guardar os dados?
-
Criar imagem com fundo transparente com javascript e canvas
Ctgabriel postou um tópico no fórum Javascript
Gente, como eu crio uma imagem com um texto que o user digitar porem essa imagem eu quero sobrepor a outra e o fundo dessa imagem do texto q o user digitou tem q ser transparente, alg tem alguma noção de como faço, Ps: eu não quero que perca a qualidade da img em monitores maiores -
Estou com um grande problema tenho imagens irregulares preciso recorta-las e salvar em um outro arquivo, até aí tudo bem, o problema é que o sistema que estou criando é totalmente responsivo, e o script abaixo delimita o tamanho da imagem, o script está cortando, salvando aimagem em png, tudo está funcionando perfeitamente, o único problema é ele não se adequar responsivo, quem souber como posso pegar os eixos x e y atuais da tela e coloca-los dentro das variáveis que fazem, pois tentei o .resize mas não deu certo, Aguardo anciosamente a resposta, muito obrigado seguem os links para que possam entender o eu eu estou querendo fazer: Para terem uma ideia melhor do que estou falando segue o link de um site com cropper.js em quadros e responsivo: https://fengyuanchen.github.io/cropperjs/ E aqui o link com exemplo de crop poligonal, https://netplayer.gr/crop/ //funçao para fazer um crop na imagem $(document).ready(function() { var condition = 1; var points = [];//holds the mousedown points var canvas = document.getElementById('myCanvas'); this.isOldIE = (window.G_vmlCanvasManager); $(function() { // if (document.domain == 'localhost') { if (this.isOldIE) { G_vmlCanvasManager.initElement(myCanvas); } var ctx = canvas.getContext('2d'); var imageObj = new Image(); function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } // Draw image onto the canvas imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = "img.png"; // Switch the blending mode ctx.globalCompositeOperation = 'destination-over'; //mousemove event $('#myCanvas').mousedown(function(e) { if (condition == 1) { ctx.beginPath(); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); } }); //mousedown event $('#myCanvas').mousemove(function(e) { if (condition == 1) { if (e.which == 1) { var pointer = $('<span class="spot">').css({ 'position': 'absolute', 'background-color': '#000000', 'width': '5px', 'height': '5px', 'top': e.pageY, 'left': e.pageX }); //store the points on mousedown points.push(e.pageX, e.pageY); //console.log(points); ctx.globalCompositeOperation = 'destination-out'; var oldposx = $('#oldposx').html(); var oldposy = $('#oldposy').html(); var posx = $('#posx').html(); var posy = $('#posy').html(); ctx.beginPath(); ctx.moveTo(oldposx, oldposy); if (oldposx != '') { ctx.lineTo(posx, posy); ctx.stroke(); } $('#oldposx').html(e.offsetX); $('#oldposy').html(e.offsetY); } $(document.body).append(pointer); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); }//condition }); $('#crop').click(function() { condition = 0; // var pattern = ctx.createPattern(imageObj, "repeat"); //ctx.fillStyle = pattern; $('.spot').each(function() { $(this).remove(); }) //clear canvas //var context = canvas.getContext("2d"); //Delimita o tamanho da imagem isso já retira a base responsiva da imagem ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); ctx.width = 350; ctx.height = 350; ctx.globalCompositeOperation = 'destination-over'; //draw the polygon setTimeout(function() { //console.log(points); var offset = $('#myCanvas').offset(); //console.log(offset.left,offset.top); for (var i = 0; i < points.length; i += 2) { var x = parseInt(jQuery.trim(points[i])); var y = parseInt(jQuery.trim(points[i + 1])); if (i == 0) { ctx.moveTo(x - offset.left, y - offset.top); } else { ctx.lineTo(x - offset.left, y - offset.top); } //console.log(points[i],points[i+1]) } if (this.isOldIE) { ctx.fillStyle = ''; ctx.fill(); var fill = $('fill', myCanvas).get(0); fill.color = ''; fill.src = element.src; fill.type = 'tile'; fill.alignShape = false; } else { var pattern = ctx.createPattern(imageObj, "repeat"); ctx.fillStyle = pattern; ctx.fill(); var dataurl = canvas.toDataURL("image/png"); //upload to server (if needed) var xhr = new XMLHttpRequest(); // // xhr.open('POST', 'upload.php', false); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var files = dataurl; var data = new FormData(); var myprod = $("#pid").val(); data = 'image=' + files; xhr.send(data); if (xhr.status === 200) { console.log(xhr.responseText); $('#myimg').html('<img src="upload/' + xhr.responseText + '.png"/>'); } } }, 20); }); // } }); }); Para interessados em testar é só adicionar as tags: <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script> e colocar um <canvas> no <body> da pagina: <canvas id="myCanvas"></canvas> Desde já Muito Obrigado a todos javascript canvas jcrop
-
[Resolvido] Copiar imagem para área de transferência
Ericsson Berg postou um tópico no fórum Javascript
Olá galera!! Tô tentando resolver um problemãooo!!! Com o Canvas consegui um dos meus objetivos principais que é transformar uma tabela em imagem, sendo que somente gerando no html, mas como copiar para área de transferência e assim poder colar num documento word, excel, email, etc... Com texto é fácil, mas com imagem não deu jeito mesmo. Alguém tem uma ajuda? -
Estou usando a biblioteca RGraph de gráficos *HTML5*, e deveria atualizar dinamicamente junto com o banco. Porém, gostaria que no gráfico fosse colocado o ultimo dado imputado no banco, portanto, se eu inserisse o valor 10 no banco, a linha do gráfico iria ficar em 10 até eu inserir outro valor, como 25, e o gráfico daria um salto. Porém o gráfico não está apresentando resultado algum. Segue o trecho do código: function update () { // A global l$.ajax({ type: "POST", url: "consulta.php", data: {}, dataType: 'json', success: function (last) { line.originalData[0].push(last); line.originalData[0].shift(); RGraph.SVG.redraw(); } }); setTimeout(function () { update() }, 50); } update(); Arquivo PHP: <?php include("salvateste.php"); $execute_again = mysqli_query($conexao, "Select * FROM tabelapi order by Evento desc"); $lone = mysqli_fetch_object($execute_again); $mostra_tudao[0] = $lone->Amperes; echo json_encode($mostra_tudao[0]); ?>
-
Olá, estou precisando de uma luz aqui, estou usando canvas para fazer um projeto, porém o canvas só aceita valores inteiros, ele não aceita valores em Real ( casa decimal ), e não posso arredondar pois eu preciso usar os valores exatos, sejam em inteiros ou em reais, alguém pode me ajudar?
-
Boa tarde, Estou fazendo um menu, em canvas, onde ao usuário clicar no menu, é carregada a página dentro do container, mas estou querendo fazer com que: Saia uma espécie de 'seta' do botão clicado, ligando ele com o container. Isso é tranquilo, porém, nisso me saiu uma dúvida: Estou pegando as posições com a função .offset(), mas também existe a função .position(). Qual a diferença real entre as duas ?
-
Eu estou desenvolvendo um jogo de cartas utilizando o elemento canvas do HTML5 e estou percebendo um atraso de varios segundos na reproducao do audio. Como eu poderia resolver isso? card.js game.js message.js script.js
-
Estou tentando desenvolver um sistema de loja com produtos "dinâmicos", ou seja, o usuário escolhe a foto que quer usar e coloca no produto e vai para o carrinho. Como nos sites http://www.fotoregistro.com.br/ e http://fancyproductdesigner.com/. Preciso muito disso, mas não sei por onde começar, poderiam me dizer qual a linguagem ou como eu posso fazer isso? OBS.: Desculpa se eu postei na sessão de PHP de forma errada. Agradeço desde já à todos.
-
Pessoal, Qual a diferença desses três WebGL, Canvas ou SVG? Alguma veio para substituir a outra?
-
Olá pessoal, estou gerando uma imagem dentro de um canvas, composta de outras 3 imagens. Ao tentar gerar uma imagem do elemento do canvas, ele me dá a mensagem de erro: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Pesquisando, li que o canvas não pode ficar 'sujo' com imagens externas, mas encontrei vários tópicos solucionando isso, bastando adicionar o atributo crossorigin = 'anonymous' na imagem. Mas ainda não está dando certo. Será que estou inserindo no local errado? Podem me auxiliar nisso? Meu código: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image(); img.crossOrigin = "Anonymous"; img = document.getElementById("modelo"+modelo); var img2 = new Image(); img2.crossOrigin = "Anonymous"; img2 = document.getElementById("minhaFoto"); var img3 = new Image(); img3.crossOrigin = "Anonymous"; img3 = document.getElementById("amigoFoto"); ctx.drawImage(img2, 50, 250, 300, 300); ctx.drawImage(img3, 400, 300, 300, 300); ctx.drawImage(img, 0, 0, 800, 800); $('#compartilhar').on('click', function() { this.href = c.toDataURL("image/png"); // neste linha que aponta o erro this.download = "arquivo.png"; });
-
Boa tarde Pessoal estou criando um gráfico em canvas a partir de dados de um .gpx. Criando toda estrutura do Canvas em <script> No entanto, não está dando muito certo Alguém tem uma ideia do porquê? <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> </head> <body> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { myFunction(xmlhttp); } } xmlhttp.open("GET", "RK_gpx _2014-11-26_1731.xml", true); xmlhttp.send(); } function myFunction(xml) { var i; var xyz = xml.responseXML; var x = xyz.getElementsByTagName("ele"); for (i = 0; i <x.length-1; i++) { var line = "<line x1='"+i+"' y1='"; line+=x[i].getElementsByTagName("ele")[0].childNodes[0].nodeValue+"' x2='"+i+1+"' y2='"; line+=x[i+1].getElementsByTagName("ele")[0].childNodes[0].nodeValue+"' style='stroke:rgb(255,0,0);stroke-width:2' />"; document.getElementById("demo").innerHTML = line; } // <line id="demo" x1="i" y1="0" x2="1" y2="x" style="stroke:rgb(255,0,0);stroke-width:2" /> } </script> <svg id="demo" height="800" width="600"> </svg> </body> </html>
-
Pessoal alguem poderia me ajudar, a como fazer para mudar de cor um objeto quando ficar um objeto por cima do outro. Não sei se isso utiliza posições de X e Y ou outras coisas. Por favor me ajudem... <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="fabric.min.js"></script> </head> <body> <canvas id="c" width="1190" height="600"></canvas> </body> <script> (function(){ var canvas = new fabric.Canvas('c'); var rect=new fabric.Rect({ left:10, top:20, fill:'red', width:90, height:90 }); var rect2 = new fabric.Rect({ left:1100, top:100, fill:'blue', width:90, height:90 }); var circle = new fabric.Circle({ radius:30, left:1100, top:200, fill:'green' }); canvas.add(rect,rect2,circle); canvas.forEachObject(function(o){ o.hasBorders = o.hasControls = true; }); canvas.item(0).selectable=false; canvas.on({ 'object:moving': onChange, }); })(); </script> </html>
