Search the Community
Showing results for tags 'canvas'.
Found 19 results
-
Olá, boa tarde. estou enfrentando um probleminha aqui. estou criando um teste aqui para inserir um canvas em um mapa e o angulo que ele esta entrando nao esta bacana, então preciso alterar ele. Mas acontece que ao usar o context.rotate() ele esta distorcendo todo o meu desenho e nao rotaciona o todo. Estou passando posição x e y, o _M_ seria o tamanho do desenho referente ao zoom do mapa e o tipo é um indicador qualquer e para posicionar ele no mapa, até ai tudo bem, funciona perfeitamente, mas quando tento rotacionar que o problema começa. function poste(pX, pY, _M_, context,tipo){ context.strokeStyle = '#000000'; context.lineWidth = 1; context.lineJoin = 'round'; context.lineCap = 'round'; context.style(). switch(tipo) { case 1: context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(6 * _M_), 17 * _M_, 111.2 * (Math.PI / 180), 68.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(41.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 158 * (Math.PI / 180), 202 * (Math.PI / 180), false); context.stroke(); context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(19 * _M_), 17 * _M_, 291.3 * (Math.PI / 180), 248.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(-16.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 22 * (Math.PI / 180), 338 * (Math.PI / 180), true); context.stroke(); break; } } Alguém pode me dar uma luz, eu tento inserir o rotate no final de todas as linhas ele buga, tento inserir no começo e ele buga, ou se eu insiro fora do switch ele buga. se puderem me apontar uma solução eu agradeço
-
Bom dia Pessoal, Estou estudando Java e estou com algumas dúvidas muito simples pra quem já domina o assunto, gostaria que me esclarecessem apenas. O curso que estou fazendo pela Internet é voltado a desenvolvimento de games com Java, e nele o professor utiliza algumas classes que fiquei com bastante dúvidas, segue abaixo. Qual a diferença entre desenhar usando o objeto Graphics ou usando BufferedImage? O que seria exatamente um BufferedImage, ou BufferStrategy? Não entendi muito bem a questão dos Buffers, preciso mesmo criar um Buffer para desenhar na tela? Ele utiliza também a Classe Canvas e JFrame, para que exatamente elas servem? Elas precisam sempre estar juntas? Qual a aplicação destas classes? Estou com dúvida nestes pontos e ficaria muito grato a quem conseguir esclarecer de forma breve para mim, e tenho certeza que irá ajudar outros iniciantes com dúvidas também. Muito Obrigado!
-
Bom dia pessoal, não sei quase nada de JavaScript e não consegui encontrar nada relacionado com o que eu preciso então desculpa se eu sair com alguma pergunta idiota aqui, bom... eu tenho um Mini Paint rodando aqui na empresa, o script não foi feito por mim, já estava rodando quando eu entrei e provavelmente foi pego na internet, bom, é uma tela em branco na qual é possível desenhar, seja com o mouse ou com o dedo na tela do celular, tem também dois botões, um para limpar a tela e outro para salvar, quando clicamos em salvar ele exibe um prompt para digitar um nome e salva o desenho em png localmente na máquina como um download, porem estou precisando modificar para que esse arquivo seja salvo em uma pasta no próprio servidor em que o script está rodando, esse servidor fica aqui na minha rede então poderia ser direto pelo script no webserver através de um endereço estilo localhost ou por um caminho estilo \\servidor\pasta_imagens que enviaria para uma pasta compartilhada no servidor aonde o site está rodando mas não faço idéia de como modificar o java script para isso, seguem os códigos, se alguém puder me ajudar agradeço muito HTML (index.html) <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Teste</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <main> <div class="left-block"> <div class="colors"> </div> <div class="brushes"> </div> <div class="buttons"> <button id="clear" type="button">Limpar</button> <button id="save" type="button">Salvar</button> </div> </div> <div class="right-block"> <canvas id="paint-canvas" width="640" height="400"></canvas> </div> </main> <script src="js/index.js"></script> </body> </html> css(css/style.css) * { box-sizing: border-box; } main { width: 800px; border: 1px solid #e0e0e0; margin: 0 auto; display: flex; flex-grow: 1; } .left-block { width: 160px; border-right: 1px solid #e0e0e0; } .colors { background-color: #ece8e8; text-align: center; padding-bottom: 5px; padding-top: 10px; } .colors button { display: inline-block; border: 1px solid #00000026; border-radius: 0; outline: none; cursor: pointer; width: 20px; height: 20px; margin-bottom: 5px } .colors button:nth-of-type(1) { background-color: #0000ff; } .colors button:nth-of-type(2) { background-color: #009fff; } .colors button:nth-of-type(3) { background-color: #0fffff; } .colors button:nth-of-type(4) { background-color: #bfffff; } .colors button:nth-of-type(5) { background-color: #000000; } .colors button:nth-of-type(6) { background-color: #333333; } .colors button:nth-of-type(7) { background-color: #666666; } .colors button:nth-of-type(8) { background-color: #999999; } .colors button:nth-of-type(9) { background-color: #ffcc66; } .colors button:nth-of-type(10) { background-color: #ffcc00; } .colors button:nth-of-type(11) { background-color: #ffff00; } .colors button:nth-of-type(12) { background-color: #ffff99; } .colors button:nth-of-type(13) { background-color: #003300; } .colors button:nth-of-type(14) { background-color: #555000; } .colors button:nth-of-type(15) { background-color: #00ff00; } .colors button:nth-of-type(16) { background-color: #99ff99; } .colors button:nth-of-type(17) { background-color: #f00000; } .colors button:nth-of-type(18) { background-color: #ff6600; } .colors button:nth-of-type(19) { background-color: #ff9933; } .colors button:nth-of-type(20) { background-color: #f5deb3; } .colors button:nth-of-type(21) { background-color: #330000; } .colors button:nth-of-type(22) { background-color: #663300; } .colors button:nth-of-type(23) { background-color: #cc6600; } .colors button:nth-of-type(24) { background-color: #deb887; } .colors button:nth-of-type(25) { background-color: #aa0fff; } .colors button:nth-of-type(26) { background-color: #cc66cc; } .colors button:nth-of-type(27) { background-color: #ff66ff; } .colors button:nth-of-type(28) { background-color: #ff99ff; } .colors button:nth-of-type(29) { background-color: #e8c4e8; } .colors button:nth-of-type(30) { background-color: #ffffff; } .brushes { //background-color: purple; padding-top: 5px } .brushes button { display: block; width: 100%; border: 0; border-radius: 0; background-color: #ece8e8; margin-bottom: 5px; padding: 5px; height: 30px; outline: none; position: relative; cursor: pointer; } .brushes button:after { height: 1px; display: block; background: #808080; content: ''; } .brushes button:nth-of-type(1):after { height: 1px; } .brushes button:nth-of-type(2):after { height: 2px; } .brushes button:nth-of-type(3):after { height: 3px; } .brushes button:nth-of-type(4):after { height: 4px; } .brushes button:nth-of-type(5):after { height: 5px; } .buttons { height: 80px; padding-top: 10px; } .buttons button { display: block; width: 100%; border: 0; border-radius: 0; background-color: #ece8e8; margin-bottom: 5px; padding: 5px; height: 30px; outline: none; position: relative; cursor: pointer; font-size: 16px; } .right-block { width: 640px height:100vh; } #paint-canvas { cursor:crosshair; } JavaScript (js/index.js) window.onload = function () { // Definitions var canvas = document.getElementById("paint-canvas"); var context = canvas.getContext("2d"); var boundings = canvas.getBoundingClientRect(); // Specifications var mouseX = 0; var mouseY = 0; context.strokeStyle = 'black'; // initial brush color context.lineWidth = 1; // initial brush width var isDrawing = false; // Handle Colors var colors = document.getElementsByClassName('colors')[0]; colors.addEventListener('click', function(event) { context.strokeStyle = event.target.value || 'black'; }); // Handle Brushes var brushes = document.getElementsByClassName('brushes')[0]; brushes.addEventListener('click', function(event) { context.lineWidth = event.target.value || 1; }); // Mouse Down Event canvas.addEventListener('mousedown', function(event) { setMouseCoordinates(event); isDrawing = true; // Start Drawing context.beginPath(); context.moveTo(mouseX, mouseY); }); // Mouse Move Event canvas.addEventListener('mousemove', function(event) { setMouseCoordinates(event); if(isDrawing){ context.lineTo(mouseX, mouseY); context.stroke(); } }); // Mouse Up Event canvas.addEventListener('mouseup', function(event) { setMouseCoordinates(event); isDrawing = false; }); // Handle Mouse Coordinates function setMouseCoordinates(event) { mouseX = event.clientX - boundings.left; mouseY = event.clientY - boundings.top; } // Handle Clear Button var clearButton = document.getElementById('clear'); clearButton.addEventListener('click', function() { context.clearRect(0, 0, canvas.width, canvas.height); }); // Handle Save Button var saveButton = document.getElementById('save'); saveButton.addEventListener('click', function() { var imageName = prompt('Digite o Número da movimentação.'); var canvasDataURL = canvas.toDataURL(); var a = document.createElement('a'); a.href = canvasDataURL; a.download = imageName || 'drawing'; a.click(); }); };
-
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?
-
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
-
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>
