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>

screenshot of problem

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>

screenshot of inelegant solution

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
scroll top