Créez un canvas aussi large et aussi haut que le parent

Question

Je voudrais créer un canvas rectangulaire pour simuler une barre de progression mais il semble que lorsque je définis la largeur et la hauteur d'un canvas à 100 %, cela ne le rend pas vraiment aussi haut et large que le parent.

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

Est-il même possible de créer un canvas non carré? Je ne veux pas définir en dur la hauteur et la largeur du canvas, car cela devrait changer dynamiquement lorsqu'il est affiché sur un écran plus grand ou plus petit, y compris sur les appareils mobiles

Answer 1

Voici un exemple fonctionnel qui corrige les problèmes :

http://jsfiddle.net/PQS3A/7/

Vous aviez plusieurs problèmes avec votre exemple :

1. Un

   n'a pas d'attributs height ou width. Vous devez les définir via CSS.

2. Même si le div était dimensionné correctement, il était en utilisant la valeur par défaut position:static, ce qui signifie qu'il n'est PAS le parent de positionnement de ses enfants. Si vous voulez que le canevas soit de la même taille que le div, vous devez définir le div en position:relative (ou absolute ou fixed).

3. Les attributs width et height sur un Canvas spécifient le nombre de pixels de données à dessiner (comme les pixels réels dans une image), et sont distincts de la taille d'affichage du canvas. Ces attributs doivent être définis à des entiers.

L'exemple lié ci-dessus utilise CSS pour définir la taille du div et en faire un parent positionné. Il crée une fonction JS (affichée ci-dessous) pour à la fois définir un canevas de la même taille de display que son parent positionné, et ensuite ajuste les propriétés internes width et height pour qu'il ait le même nombre de pixels qu'il affiche.

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Le faire remplir visuellement le parent positionné
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...puis définir la taille interne pour correspondre
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

Answer 2

Utilisez les attributs width et height du canvas si vous souhaitez qu'il soit réellement 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, alors 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 de hauteur et de largeur css, style="width:100%; height:100%;", alors vous étirez simplement le canvas. Cela entraînera un étirement de tout ce que vous dessinez sur le canvas.

JSFiddle pour la solution JQuery.

JSFiddle pour la solution Javascript.

Answer 3

Utilisez les propriétés CSS au lieu des attributs sur les balises:

​

Ça semble fonctionner