faire toile aussi large et aussi haut que parent
Je voudrais faire une toile rectangulaire pour simuler une barre de progression mais il semble que lorsque je règle la largeur et la hauteur d'une toile à 100%, cela ne la rend pas vraiment aussi haute et aussi large que parent
Voir l'exemple ci-dessous
http://jsfiddle.net/PQS3A/
Est-il même possible de faire une toile non carrée? Je ne veux pas coder en dur la hauteur et la largeur de la toile, car elle devrait changer dynamiquement lorsqu'elle est vue dans un écran plus grand ou plus petit, y compris mobile Dispositifs
3 réponses
Voici un exemple de travail pour résoudre les problèmes:
Http://jsfiddle.net/PQS3A/7/
Vous avez eu plusieurs problèmes avec votre exemple:
- Un
<div>n'est pasheightouwidthattributs. Vous devez les définir via CSS. - même si le div était dimensionné correctement, il utilisait le
position:staticpar défaut, ce qui signifie qu'il n'est pas le parent de positionnement d'aucun enfant. Si vous voulez que le canevas ait la même taille que le div, vous devez définir le div surposition:relative(ouabsoluteoufixed). - les attributs
widthetheightsur un canevas spécifient le nombre de pixels de données à dessiner (comme les pixels réels dans une image), et sont séparés de la taille d'affichage du canevas. Ces attributs doivent être définis sur des entiers.
L'exemple lié ci-dessus utilise CSS pour définir la taille div et en faire un parent positionné. Il crée une fonction JS (ci-dessous) pour définir à la fois un canevas à la même taille display que son positionné parent, puis ajuste les propriétés internes width et height de sorte qu'il ait le même nombre de pixels qu'il montre.
var canvas = document.querySelector('canvas');
fitToContainer(canvas);
function fitToContainer(canvas){
// Make it visually fill the positioned parent
canvas.style.width ='100%';
canvas.style.height='100%';
// ...then set the internal size to match
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
Utilisez les attributs width et height du canevas si vous voulez qu'il soit aussi grand que l'élément parent. Vous pouvez les définir en utilisant JQuery .
$(document).ready(function() {
var canvas = document.getElementById("theCanvas");
canvas.width = $("#parent").width();
canvas.height = $("#parent").height();
});
Si vous ne connaissez pas JQuery , utilisez le Javascript suivant:
var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;
Si vous utilisez les attributs css height et width, style="width:100%; height:100%;", vous étirez simplement le canevas. Cela fera en sorte que tout ce que vous dessinez sur la toile soit étiré.
JSFiddle pour JQuery solution.
JSFiddle pour la solution Javascript.
Utilisez les propriétés CSS au lieu des attributs sur les balises:
<div style="background-color:blue;width:140px;height:20px">
<canvas style="background-color: red;width:100%;height:100%">
</canvas>
</div>