web-dev-qa-db-fra.com

faire une toile aussi large et aussi haute que le 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 large que le parent

veuillez voir l'exemple ci-dessous
http://jsfiddle.net/PQS3A/

Est-il même possible de faire des toiles non carrées? Je ne souhaite pas coder en dur la hauteur et la largeur de la toile, car elles devraient changer de manière dynamique lorsqu'elles sont affichées sur un écran plus grand ou plus petit, y compris sur les appareils mobiles.

javascripthtmlcsshtml5canvas
58
user1118019

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:

  1. UNE <div> n'a pas d'attributs height ou width. Vous devez définir ceux-ci via CSS.
  2. Même si la div était correctement dimensionnée, elle utilisait la valeur par défaut position:static, ce qui signifie qu’il n’est PAS le parent parent d’un enfant. Si vous voulez que le canevas ait la même taille que la div, vous devez définir la div à position:relative (ou absolute ou fixed).
  3. Les attributs width et height d'un canevas spécifient le nombre de pixels de données sur lesquels dessiner (comme les pixels réels d'une image), et sont distincts de la taille d'affichage de la toile. Ces attributs doivent être définis sur des entiers.

L'exemple lié à ci-dessus utilise CSS pour définir la taille de la div et en faire un parent positionné. Il crée une fonction JS (illustrée ci-dessous) pour définir un canevas de la même manière display taille que son parent positionné, puis ajuste les width et height propriétés de sorte qu'il a 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;
}
102
Phrogz

Utilisez les attributs width et height du canevas si vous voulez qu'il soit aussi gros que l'élément parent. Vous pouvez les configurer avec 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 code 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%;", alors vous étirez simplement la toile. Ainsi, tout ce que vous dessinez sur la toile aura l’air tendu.

JSFiddle pour la solution JQuery.

JSFiddle pour la solution Javascript.

8
Brant Olsen

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>​

Cela semble fonctionner

0
Kristoffer Sall-Storgaard