Preguntas etiquetadas con canvas

Canvas es un término genérico para la superficie de dibujo utilizada con muchas API de salida de gráficos de forma libre. Use esta etiqueta con otras etiquetas que indican la API de gráficos específica que se está utilizando junto con el lenguaje de programación y el entorno de destino: [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] etc. También incluya una etiqueta de lienzo específica como [android-canvas], [html5-canvas], [tkinter-canvas] si corresponde.

10
¿Cuál es la diferencia entre SVG y HTML5 Canvas?
¿Cuáles son las diferencias entre SVG y HTML5 Canvas? Ambos parecen hacerme lo mismo. Básicamente, ambos dibujan ilustraciones vectoriales utilizando puntos de coordenadas. ¿Qué me estoy perdiendo? ¿Cuáles son las principales diferencias entre SVG y HTML5 Canvas? ¿Por qué debería elegir uno sobre el otro?
92 html  canvas  svg 
5
Cómo llenar todo el lienzo con un color específico.
Cómo llenar HTML5 completo <canvas>con un solo color. Vi algunas soluciones como esta para cambiar el color de fondo usando CSS pero esta no es una buena solución ya que el lienzo permanece transparente, lo único que cambia es el color del espacio que ocupa. Otro es crear algo con …
10
¿Por qué canvas.toDataURL () lanza una excepción de seguridad?
¿No dormí lo suficiente o qué? Este siguiente código var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.png" img.onload=function() { // draw image ctx.drawImage(img, 0, 0) // Here's where the error happens: window.open(frame.toDataURL("image/png")); } está lanzando este error: SECURITY_ERR: DOM Exception 18 ¡No hay forma de que esto no …
2
Datos PNG Base64 a lienzo HTML5
Quiero cargar una imagen PNG codificada en Base64 al elemento canvas. Tengo este codigo: <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> En Chrome 8 aparece el error: Uncaught TypeError: Type error Y …
89 html  canvas  png  base64 
9
Obtener color de píxeles del lienzo, en mousemove
¿Es posible obtener el píxel de valor RGB con el mouse? ¿Existe un ejemplo completo de esto? Esto es lo que tengo hasta ahora: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var …
6
Html5 Canvas DrawImage: cómo aplicar antialiasing
Eche un vistazo al siguiente ejemplo: http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; Como puede ver, la imagen no tiene suavizado, aunque …
16
¿Cómo dibujar un óvalo en un lienzo html5?
No parece haber una función nativa para dibujar una forma ovalada. Además, no estoy buscando la forma de huevo. ¿Es posible dibujar un óvalo con 2 curvas Bézier? ¿Alguien experimentó con eso? Mi propósito es dibujar algunos ojos y en realidad solo estoy usando arcos. Gracias por adelantado. Solución Entonces …
11
¿Cómo guardar el lienzo como imagen png?
Tengo un elemento de lienzo con un dibujo y quiero crear un botón que, al hacer clic en él, guardará la imagen como un archivo png. Por lo tanto, debería abrir el cuadro de diálogo guardar, abrir, cerrar ... Lo hago usando este código var canvas = document.getElementById("myCanvas"); window.open(canvas.toDataURL("image/png")); Pero …
1
Establecer las propiedades del lienzo en una plantilla de datos ItemsControl
Estoy tratando de vincularme a esto ItemsControl: <ItemsControl ItemsSource="{Binding Path=Nodes, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> Al usar esto DataTemplate, estoy tratando de colocar individualmente mis Nodeelementos Canvascorrectamente: <DataTemplate DataType="{x:Type Model:EndNode}"> <Controls:EndNodeControl Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" /> </DataTemplate> Sin embargo, no funciona como se esperaba. Todos los …
80 c#  wpf  xaml  canvas  itemscontrol 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.