Evitar que el borde del accidente cerebrovascular se desborde
Pregunta
strokeRect (0, 0, canvasWidth, canvasHeight);
dibuja un rectángulo completo pero el ancho de la línea se corta por la mitad, aquí hay un ejemplo:
<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>
Puedo arreglar eso pero no es 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>
¿Hay un método nativo para hacer eso? Algo como el atributo CSS3 de "tamaño de caja":
canvas {
box-sizing: border-box;
}
Gracias.
No hay solución correcta
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow