La programmation html5-canvas

23

Comment effacer le canevas pour le redessiner

Après avoir expérimenté des opérations composites et dessiné des images sur la toile, j'essaie maintenant de supprimer les images et le compositing. Comment puis-je faire cela? J'ai besoin d'effacer la toile pour redessiner d'autres images; cela peut durer un certain temps, donc je ne pense pas que dessiner un nouveau …

1013 javascript html canvas html5-canvas composite

8

HTML5 Canvas vs SVG vs div

Quelle est la meilleure approche pour créer des éléments à la volée et pouvoir les déplacer? Par exemple, disons que je veux créer un rectangle, un cercle et un polygone, puis sélectionner ces objets et les déplacer. Je comprends que HTML5 fournit trois éléments qui peuvent rendre cela possible: svg …

476 javascript html svg html5-canvas

14

Redimensionner le canevas HTML5 pour l'adapter à la fenêtre

Comment mettre automatiquement à l'échelle l' <canvas>élément HTML5 pour l'adapter à la page? Par exemple, je peux obtenir une mise <div>à l'échelle en définissant les propriétés heightet widthà 100%, mais <canvas>pas une mise à l'échelle, n'est-ce pas?

400 javascript html html5-canvas

7

Comment enregistrer une toile HTML5 en tant qu'image sur un serveur?

Je travaille sur un projet d'art génératif où j'aimerais permettre aux utilisateurs de sauvegarder les images résultantes d'un algorithme. L'idée générale est: Créer une image sur un canevas HTML5 à l'aide d'un algorithme génératif Une fois l'image terminée, autorisez les utilisateurs à enregistrer le canevas en tant que fichier image …

261 javascript php ajax html5-canvas

4

Comment animer le dessin d'un texte sur une page Web?

Je veux avoir une page Web qui a un mot centré. Je veux que ce mot soit dessiné avec une animation, de telle sorte que la page "écrit" le mot de la même manière que nous le ferions, c'est-à-dire qu'il commence à un point et dessine des lignes et des …

229 javascript css canvas html5-canvas css-shapes

15

Comment enregistrer une image PNG côté serveur, à partir d'une chaîne de données base64

J'utilise l'outil JavaScript "Canvas2Image" de Nihilogic pour convertir des dessins de toile en images PNG. Ce dont j'ai besoin maintenant, c'est de transformer ces chaînes base64 que cet outil génère, en fichiers PNG réels sur le serveur, en utilisant PHP. En bref, ce que je fais actuellement est de générer …

212 php javascript base64 html5-canvas

10

Les toiles souillées ne peuvent pas être exportées

Je souhaite enregistrer ma toile dans une image. J'ai cette fonction: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Cela me donne une erreur: Uncaught SecurityError: Impossible d'exécuter 'toDataURL' sur 'HTMLCanvasElement': les toiles contaminées ne peuvent pas être exportées. Que …

200 javascript html5-canvas

11

Orientation Exif côté client JS: rotation et miroir des images JPEG

Les photos des appareils photo numériques sont souvent enregistrées au format JPEG avec une balise «d'orientation» EXIF. Pour s'afficher correctement, les images doivent être pivotées / reflétées en fonction de l'orientation définie, mais les navigateurs ignorent ces informations pour rendre l'image. Même dans les grandes applications Web commerciales, la prise …

154 javascript rotation html5-canvas exif

14

Image de redimensionnement du canevas HTML5 (échelle inférieure) Haute qualité?

J'utilise des éléments de canevas html5 pour redimensionner les images dans mon navigateur. Il s'avère que la qualité est très faible. J'ai trouvé ceci: Désactivez l'interpolation lors de la mise à l'échelle d'un <canvas>, mais cela n'aide pas à augmenter la qualité. Vous trouverez ci-dessous mon code css et js …

149 javascript css html canvas html5-canvas

10

comment dessiner une courbe lisse à travers N points en utilisant javascript HTML5 canvas?

Pour une application de dessin, j'enregistre les coordonnées du mouvement de la souris dans un tableau, puis je les dessine avec lineTo. La ligne résultante n'est pas lisse. Comment puis-je produire une seule courbe entre tous les points rassemblés? J'ai cherché sur Google mais je n'ai trouvé que 3 fonctions …

133 javascript canvas html5-canvas bezier spline

11

Comment réparer l'erreur getImageData () Le canevas a été contaminé par des données d'origine croisée?

Mon code fonctionne très bien sur mon hôte local mais il ne fonctionne pas sur le site. J'ai eu cette erreur de la console, pour cette ligne .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. une partie de mon code: jQuery.Event.prototype.rgb=function(){ …

131 javascript html html5-canvas

8

Accès aux données de rotation JPEG EXIF en JavaScript côté client

Je voudrais faire pivoter les photos en fonction de leur rotation d'origine, comme défini par l'appareil photo dans les données d'image JPEG EXIF. L'astuce est que tout cela devrait se produire dans le navigateur, en utilisant JavaScript et <canvas>. Comment JavaScript pourrait-il accéder au JPEG, un objet API de fichier …

125 javascript jpeg exif html5-canvas

6

Modification de l'arrière-plan three.js en transparent ou d'une autre couleur

J'ai essayé de changer ce qui semble être la couleur d'arrière-plan par défaut de ma toile de noir à transparent / toute autre couleur - mais pas de chance. Mon HTML: <canvas id="canvasColor"> Mon CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Comme vous pouvez le …

122 css html canvas html5-canvas three.js

9

Y a-t-il une raison d'utiliser WebGL au lieu de 2D Canvas pour les jeux / applications 2D?

Existe-t-il une raison, à l'exception des performances, d'utiliser WebGL au lieu de 2D-Canvas pour les jeux / applications 2D ? En d'autres termes, quelles sont les fonctionnalités 2D offertes par WebGL qu'il n'est pas possible de réaliser facilement avec 2D-Canvas?

114 html html5-canvas webgl

7

Comment aligner l'élément absolument positionné au centre?

J'essaie d'empiler deux toiles ensemble et d'en faire une toile à double couche. J'ai vu un exemple ici: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Mais je voudrais aligner …

103 css html5-canvas

Questions marquées «html5-canvas»