Empêcher la frontière de course de la trajectoire débordante
Question
strokeRect (0, 0, canvasWidth, canvasHeight);
Dessine un rectangle complet mais la largeur de ligne est coupée en deux, voici un exemple:
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName ("canvas");
var lineWidth = 10;
var canvasHeight = canvas[0].height;
var canvasWidth = canvas[0].width;
var ctx = canvas[0].getContext ("2d");
ctx.lineWidth = lineWidth;
ctx.strokeRect (0, 0, canvasWidth, canvasHeight);
</script>
Je peux résoudre ce problème mais n'est pas élégant:
<canvas></canvas>
<script>
var canvas = document.getElementsByTagName ("canvas");
var lineWidth = 10;
var canvasHeight = canvas[0].height - lineWidth;
var canvasWidth = canvas[0].width - lineWidth;
var ctx = canvas[0].getContext ("2d");
ctx.lineWidth = lineWidth;
lineWidth /= 2;
ctx.strokeRect (lineWidth, lineWidth, canvasWidth, canvasHeight);
</script>
Y a-t-il une méthode native pour le faire? Quelque chose comme l'attribut CSS3 "-Dimensiège":
canvas {
box-sizing: border-box;
}
Merci.
Pas de solution correcte
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow