Tag: canvas

Dibujando un rectángulo sobre canvas.

Estoy tratando de crear un progtwig de canvas simple donde el usuario pueda crear constantemente nuevas formas. Este es solo un creador de rectangularjs básico (espero expandirlo más a círculos, líneas y tal vez incluso a otras cosas). Ahora mismo, aunque he creado algo que está funcionando de una manera realmente extraña. Dragging a square […]

¿Por qué CORS en imágenes con HTML Canvas?

Recientemente, dediqué un poco de tiempo a buscar una solución a un problema bastante común en el desarrollo web. Estaba tratando con logotipos alineados en el medio en un fondo transparente, pero al tener que colocar texto debajo de ellos, parecería que la cantidad de el espacio en blanco entre el texto y la imagen […]

Copia una matriz de píxeles bidimensionales a un canvas de Javascript

Usando el elemento de canvas de Javascript, ¿es posible copiar una matriz bidimensional de valores RGB a un canvas? //copy the following array to the canvas: var arr1 = [ [[255, 255, 255],[200, 200, 0],[200, 200, 200]], [[200, 0, 0],[200, 200, 0],[200, 200, 0]], [[200, 200, 0],[200, 0, 0],[200, 200, 0]] ]

¿Un canvas HTML5 siempre tiene que ser un rectángulo?

La razón por la que estoy interesado en los canvass que tengan cualquier forma es que entonces sería posible recortar imágenes con curvas Bezier y hacer que el texto de una página web fluya alrededor de la forma del canvas, es decir, una imagen recortada. Lo que se necesita es la posibilidad de tener un […]

Imágenes aleatorias cayendo como lluvia en canvas (Javascript)

Así que he estado jugando con el canvas. Tratar de simular objetos que caen al azar, dibujar la imagen de fondo no es un problema y no es el segundo img que se supone que simula una gota de lluvia. Puedo hacer que la gota caiga en una x aleatoria pero ahora no estoy realmente […]

Crear elemento de canvas con imagen y anexar a padre

Necesito crear el elemento Canvas con imagen y debo adjuntar a los padres para esto, he hecho esto window.onload = function() { var canvas = document.createElement(‘canvas’); var context = canvas.getContext(“2d”); canvas.id = “canvas_id”; canvas.setAttribute(“class” ,”canvas”); canvas.height = “400”; canvas.width = “800”; var image = new Image(); image.src = “http://localhost/tile.png”; image.onload = function(){ context.drawImage(image, canvas.width, canvas.height); […]

Mouse Coordenadas en canvas tras escala CSS

Estoy intentando localizar las coordenadas del mouse en un elemento de canvas de una página HTML5. Creo que el canvas tiene una cierta altura y anchura, por ejemplo, 700×700. Cuando muevo el mouse sobre el canvas, quiero poder saber la X, Y del mouse. Esto funciona bien, hasta que extiendo mi canvas usando CSS en […]

¿Cómo obtengo las coordenadas de los vértices de formas en lugar de las coordenadas de las esquinas de control en fabric js?

El siguiente código me da las coordenadas de las esquinas de control, pero quiero calcular las coordenadas de los vértices de triángulo, pentágono, hexágono, etc. function getCoords(oCoords) { return { tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y), tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y), bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y), br: new fabric.Point(oCoords.br.x, oCoords.br.y) } } canvas.on(‘mouse:move’, function(e){ console.log(‘over1’,e.target) if(e.target && e.target !== […]

Html5 Canvas redimensionar

Estoy usando un canvas para cambiar el tamaño de la imagen en el lado del cliente y luego subir esa imagen al servidor. Mi intención era cambiar el tamaño de la imagen a la mitad de sus dimensiones originales y quería ver una disminución en el tamaño del archivo. Pero el tamaño de la imagen […]

¿Existe una forma nativa de abordar un objeto que no sea un rectángulo en el canvas en js?

He creado una cuadrícula de varios rectangularjs distorsionados hechos con curvas Bezier. Cada rectángulo tiene su propio color en la imagen. Digamos, quiero agregar efecto de desplazamiento para cada uno de estos rectangularjs, por lo tanto, necesito saber sus dimensiones. Como puedo llenar o acariciar la figura, asumo que hay alguna manera de obtenerlos, pero […]

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.