13
votos
Aceito
WebGL, Canvas e Graficos 3D
Há diferença entre WebGL e Canvas ou ela é apenas uma ramificação do mesmo?
O canvas é um elemento responsável por desenhar na página. Como esse desenho é feito depende do contexto (context) ...
- 82,3mil
13
votos
Aceito
Cálculos utilizados para rotacionar uma imagem no canvas
Por que em A, o canvas precisa ter as mesmas dimensões da imagem?
Esta ação cria um buffer - um espaço de trabalho temporário - com o mesmo tamanho da imagem-alvo.
Por que em B, o canvas precisa ...
- 36,8mil
9
votos
Escrever na tela Javascript
Seguindo o exemplo do link postado pelo @JuniorNunes.
O Autor deixou esqueceu algumas partes como declarar as variaveis canvasWidth e canvasHeight referentes ao tamanho da area que voce pode desenhar ...
- 1.649
7
votos
Aceito
Como fazer uma animação substituindo imagens
Você pode usar API Canvas para alterar as imagens dando a impressão de movimento,construir mapas, e usar todos os recursos do javascript/html5 para dar interatividade a suas imagens
Veja esse exemplo,...
- 1.730
7
votos
Aceito
Pra que serve a tag <canvas>?
O elemento canvas permite o desenvolvedor criar imagens via código. Tratando-se de uma página Web, controla-se o canvas com JavaScript. Não é limitado à formas geométricas, você pode inserir imagens, ...
- 75,6mil
7
votos
Aceito
Como inserir objetos usando canvas (javascript) e evitar 2 objetos na mesma posição
Para detectar a colisão entre duas geometrias é preciso implementar um teste de colisão.
Existe um algoritmo específico para o teste de colisão entre duas figuras de geometria arbitrária que se chama ...
- 18,4mil
6
votos
Aceito
Redimensionar uma imagem em um elemento canvas com js
Considerei para a resposta que a imagem deve preencher todo o espaço.
O código apresentado verifica somente a proporção da imagem original. Modifiquei o código para verificar as proporções da imagem ...
- 5.699
6
votos
Aceito
Rodar uma seta num canvas
Problema resolvido! Após definir o ponto de translação, as coordenadas usadas para desenhar a seta devem ter como base o ponto 0 que na verdade passa a ser o ponto de translação.
// move the ...
- 333
6
votos
Aceito
Resolução de equações
Se após a substituição do x o resultado for uma equação até de 2º grau em y, então dá para resolver pela Fórmula de Bhaskara:
a*y^2 + b*y + c = 0
y = -b +- raiz(b^2 - 4*a*c)
---------------------...
- 82,3mil
6
votos
Aceito
Rolagem de TiledMap
Dei uma arrumada no seu código e ficou assim:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var grass = new Image();
var sand = new Image();
grass.src =...
- 64,5mil
6
votos
Aceito
É possível salvar o canvas como imagem, e enviar ao servidor?
É possível obtendo a imagem no lado do cliente com JavaScript e enviando ao seu servidor com uma requisição assíncrona (AJAX). Imagine que exista na página um botão Salvar, que quando o usuário ...
- 75,6mil
5
votos
Converter Html em Canvas
Canvas não renderiza HTML, só "imagens". Existem algumas bibliotecas que podem tentar converter o HTML em imagens, tal como html2canvas.
Entretanto, você pode criar um Web Component para ter "uma ...
- 73,9mil
5
votos
Aceito
Como funciona os métodos "restore" e "save"?
Basicamente o .save guarda o estado atual do contexto:
A matriz de transformação atual;
a Região de recorte;
a lista de tracejado;
e os valores destes atributos todos:
strokeStyle, fillStyle, ...
- 93,8mil
4
votos
Aceito
Obter elemento sem id
Se você precisa dos canvas dentro do elemento #itens
1) $('#itens canvas') seleciona todos os canvas dentro do elemento $itens
2a) Para retornar apenas o primeiro (ou único) utilize $('#itens canvas'...
- 2.567
4
votos
Aceito
Referência não encontrada para propriedade de objeto
Na função run, você está percorrendo para uma posição que o conjunto de pontos não tem registro.
for(var j = 0; j <= dots.length; j++){ <- errado
for(var j = 0; j < dots.length; j++){ <- ...
- 3.008
4
votos
Aceito
Como inserir uma marca d'água em png
Basta carregar e imprimir outra imagem por cima da primeira.
Exemplo simplificado:
//após desenhar a primeira...
var marcaDagua = new Image();
marcaDagua.onload = function() {
ctx.drawImage(...
- 73,9mil
4
votos
Aceito
Localização de um ponto dentro do intervalo de um arco
Há duas formas de fazer isso.
1. Chutando
A forma mais simplista é chutar coordenadas (px, py) e verificar se elas estão dentro da área desejada.
Para fazer essa verificação, faça assim:
Calcule a ...
- 73,9mil
4
votos
canvas - Preencher um semi sorriso com a cor vermelha
Se você quer preencher o sorriso do Boneco de Neve, faltou a chamada para ctx.fill() depois de desenhá-lo. Veja o código (a linha inserida está indicada com um comentário):
var canvas = document....
- 34,4mil
4
votos
Aceito
Existe alguma forma de manipular o brilho da imagem através do Canvas?
Em resumo, e de uma forma fácil, basta apenas multiplicar os valores de RGB (separadamente) por um valor. Se o valor for maior que 1, você estará aumentando o brilho. Com isso, logicamente, se o valor ...
- 21,8mil
4
votos
Aceito
É possível espelhar uma imagem horizontalmente (flip) com Canvas?
Você pode utilizar o context.scale(-1, 1); e passar como parâmetro o width da imagem vezes -1 ao realizar o drawImage() do contexto.
var onload = function() {
var canvas = document....
- 2.746
4
votos
Aceito
Sistema de colisão para jogo em html5!
O que você está a fazer não está correto porque basicamente você está a verificar se um pixel colide com outro. Você deverá verificar a colisão utilizando areas/intervalos.
Aqui vão os tipos de ...
- 3.235
3
votos
Aceito
Trabalhando com o Canvas - Sem Borda
A borda é desenhada pela função rect, então basta você usar a função fillRect no primeiro trecho do código.
Além disso, ajustei um pouco seu exemplo para gerar um plano cartesiano centralizado no ...
- 73,9mil
3
votos
Localização de um ponto dentro do intervalo de um arco
Com um possível erro de off-by-one nos meus números aleatórios, acho que é isto aqui:
// Ângulos mínimo e máximo no círculo, em radianos
var minDeg = Math.PI;
var maxDeg = Math.PI * 5/4;
// Ângulo ...
- 65,9mil
3
votos
Aceito
Imagem menor que a original upada em canvas ao fazer drawImage()
Segue um exemplo funcionando:
$(document).ready(function() {
$("#uploadImagem").change(function(e) {
var _URL = window.URL || window.webkitURL,
arquivo = e.target.files[0],
...
- 7.829
3
votos
Aceito
função zoom em javascript
Se você quiser que o canvas inteiro aumente de tamanho, inclusive seu conteúdo desenhado, você pode usar a propriedade CSS transform (que se aplica a qualquer elemento HTML). Se por outro lado o que ...
- 82,3mil
3
votos
Aceito
Modificar Canvas em tempo real
Sim, você pode fazer isso no evento keyup como no exemplo:
$(document).ready(function() { // Ao carregar a página
$(this).on('keyup', 'input.canvas-settings', function(event){ // Ao soltar a ...
- 11,7mil
3
votos
Aceito
Grafico feito com imperfeição Javascript canvas
O ideal seria usar a propriedade width e height em vez de clientWidth e clientHeight:
window.onload = function () {
var contex = document.getElementById("grafico").getContext("2d");
contex....
- 93,8mil
3
votos
Aceito
Construtor de botoes em JavaScript canvas
Não vejo como possas criar um event handler com a criação do botão pois o canvas não tem elementos como o SVG. O que tens de fazer é calcular onde foi clicado e ter uma array de botões que possas ...
- 135mil
3
votos
Aceito
Forçar aparecer extensão ao fazer download via javascript
Primeiro sempre declare a função antes de usa-las ou definir ao .on ou então use neste formato function ...() ao invés deste ... = function().
Pra resolver o problema você deve criar um link usando ...
- 100mil
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
canvas × 207javascript × 152
html5 × 63
html × 41
jquery × 23
android × 11
css × 10
imagem × 9
php × 7
html5-canvas × 7
chartjs × 6
java × 5
delphi × 4
animação × 4
css3 × 3
front-end × 3
matemática × 3
processamento-de-imagens × 3
jspdf × 3
html2canvas × 3
c# × 2
python × 2
ajax × 2
array × 2
angularjs × 2