9
votes

Toile HTML5 en tant qu'impe de fond CSS?

est-il possible de rendre l'image d'arrière-plan d'une toile divisée pouvant être modifiée avec GetContext ("2D")?


0 commentaires

3 Réponses :


-3
votes

Vous pouvez avoir une toile à l'intérieur de la DIV avec une position absolue CSS, d'autres éléments doivent avoir une index Z supérieure à la toile.


0 commentaires

30
votes

Eh bien, vous pouvez placer un élément de toile à l'intérieur de la div, maximiser sa hauteur et sa largeur, définir sa position sur relative et son index z à une valeur négative.

Cependant, si vous souhaitez utiliser un vrai CSS. arrière-plan-image: ... Vous devrez créer votre image à l'intérieur de votre canvas. Vous pouvez ensuite utiliser TODaaurl pour obtenir une URL de données que vous pourrait utiliser comme valeur pour votre image d'arrière-plan d'origine : xxx

si vous ne voulez pas créer de neuf Contexte mais manipulez un existant, chargez votre arrière-plan d'origine dans un objet d'image (ou obtenez une référence) et utilisez Drawimage : xxx


2 commentaires

Existe-t-il un moyen d'utiliser une toile comme une image de backgroud d'arrière-plan de plusieurs antécédents sans insertion de plusieurs toiles ou générer plusieurs URL de données, tout comme --WebKit-Toile? Il sauvera la mémoire si elle est possible .. S'il peut spécifier l'URL de la toile dans le fichier CSS, elle simplifiera beaucoup la programmation car elle n'a pas besoin d'insérer une toile pour chaque DIV avec les mêmes origines.


@san: C'est une autre question et des commentaires ne sont pas le bon endroit pour leur demander. Cela étant dit, dès que vous utilisez TODAaurl , vous pouvez utiliser l'URL générée partout où vous voulez et réutiliser la toile (ou le jeter). Dépend de votre cas d'utilisation. Mais ensuite, encore une fois, pas le bon endroit pour les questions de suivi.



8
votes

Définir l'image de fond de la DIV à ceci:

"url('" + canvas.toDataURL() + "')";


2 commentaires

En supposant que cela fonctionne comme prévu, cela et la réponse choisie sont correctes à 100%. Celui-ci une affectation de la propriété de fond-image en CSS, l'autre sur la base de l'indexation z.


Je pense que cela est plus en phase de ce que l'OP recherchait, pour remplacer la représentation de la toile dessinée dynamiquement avec une image statique, codée ici dans l'URL.