Tag: canvas

Comment ajouter et supprimer (plusieurs) images à partir d'un canevas.?

Je suis nouveau sur toile (HTML5), je dois concevoir une application de peinture sur toile. Il existe une fonctionnalité comme l'ajout dynamique de l'image sélectionnée à la toile (sur les mouvements de la souris) et la fonctionnalité pour supprimer et glisser cette image ajoutée (Identique pour l'ajout de texte). Maintenant, ma question est de savoir […]

SVG à PNG en conservant CSS à l'aide de javascript

C'est un peu long, mais est-ce que quelqu'un sait d'un outil qui peut exporter un png à partir d'une entrée svg et conserver les styles CSS qui lui sont appliqués. J'ai utilisé canvg, mais tout semble noir dans la sortie, car les styles sont conservés dans css et ne font pas partie du document svg. […]

Flou de mouvement de toile html avec fond transparent

Je viens de créer un effet de toile de fantaisie à l'aide d'un flou de mouvement peu coûteux ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height); Maintenant, je veux faire la même chose, mais avec un fond transparent. Y a-t-il un moyen de faire quelque chose comme ça? Je joue avec globalAlpha, mais c'est probablement une mauvaise façon. PS: […]

Gérer les cartes de texte dans un tableau 2D sur pour être peint sur HTML5 Canvas

Donc, je fais un RPG HTML5 juste pour le plaisir. La carte est une <canvas> (carreaux de 512px de largeur, 352px de hauteur | 16, 11 carreaux de haut en bas). Je veux savoir s'il existe un moyen plus efficace de peindre le <canvas> . Voici comment je l'ai maintenant: Comment les carreaux sont-ils chargés […]

Empêchez la page de faire défiler dans Drag in IOS et Android

Je travaille sur un jeu de toile html5, mais je ne sais pas comment gérer les événements tactiles. Lorsqu'un utilisateur appuie sur l'écran, puis faites glisser, le navigateur fera défiler la page. Je voudrais l'empêcher, obtenir le début de la touche et toucher la position finale. C'est possible? Merci d'avance

Ajouter un événement de clic sur les éléments d'un SVG incorporé en javascript

J'ai obtenu cette image SVG de Wikipedia et l' ai intégré dans un site Web utilisant ce code: <embed src="circle1.svg" type="image/svg+xml"/> Si vous exécutez ceci, vous pouvez inspecter l'élément et voir le code source. Tous les pays de l'image sont des éléments distincts. Si je clique sur un pays, je souhaite alerter l'identifiant de ce […]

Efface tout le canevas HTML5 transformé tout en préservant la transformation du contexte

Je souhaite zoomer et faire pivoter un canevas HTML5 en transformant le contexte en utilisant translate() et scale() , en effaçant le canevas, puis en redessinant. Notez que je ne suis pas appeler expressément save() et restore() autour de mes transformations. Si ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) le ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) standard ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) l'ensemble du canevas visible ne sera pas effacé; […]

Comment rendre les glyphes de FontAwesome sur un élément Canvas

FontAwesome spécifie les glyphes dans son fichier CSS comme suit : /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } J'essaie de rendre les icônes de cette police à un […]

Chargez une toile html5 dans une image PIL avec Django

J'essaie d'obtenir le contenu d'une toile html5 et de la transmettre à mon serveur django où elle sera ensuite manipulée avec PIL et enregistrée en PNG. Voici ce que j'ai jusqu'ici: À partir du formulaire HTML, l'utilisateur clique sur le bouton "mise à jour", le contenu de la toile – avec canvas.toDataURL () – est […]

Créer une image réfléchie avec un canevas HTML?

J'ai le code suivant qui tente de combiner une image miroir verticale avec un gradient de couleur transparent ou en arrière plan. Lors de la combinaison de ces deux effets, il échoue, dois-je superposer un gradient PNG sur la toile au lieu d'essayer d'obtenir la toile pour effectuer les deux opérations? <!DOCTYPE html PUBLIC "-//W3C//DTD […]

JavaScript rend le site Web intelligent, beauté et facile à utiliser.