Prevenire il bordo dell'ictus dall'enorbolaggio traboccante
Domanda
strokeRect (0, 0, canvasWidth, canvasHeight);
Disegna un rettangolo completo ma la larghezza della linea viene tagliata a metà, ecco un esempio:
<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>
Posso risolverlo ma non è elegante:
<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>
C'è un metodo nativo per farlo? Qualcosa come l'attributo CSS3 "dimensionario in scatola":
canvas {
box-sizing: border-box;
}
Grazie.
Nessuna soluzione corretta
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow