防止中风边界溢出路径

Question

strokeRect (0, 0, canvasWidth, canvasHeight);绘制一个完整的矩形，但线宽减半，这是一个例子：

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

我可以解决这个问题但不优雅：

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

有没有本地方法呢？类似于“box-sizing”css3属性：

canvas {
    box-sizing: border-box;
}

感谢。

Answer 1

HTML5中的笔划 - 在Adobe Illustrator或SVG中 - 始终以它们所描绘的路径为中心。很久以前我proposed一个new SVG property听起来像你想要的，但这个功能既不是SVG也不是Canvas。 你的中风表现得如此。

然而，你可以使用clipping region来解决这个问题，剪裁到与你要划线的路径相同并加倍你的名义lineWidth：

function clippedRectStroke( ctx, x, y, w, h ){
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x,y+h);
  ctx.lineTo(x+w,y+h);
  ctx.lineTo(x+w,y);
  ctx.clip();
  ctx.lineWidth *= 2;
  ctx.strokeRect(x,y,w,h);
  ctx.restore(); 
};

此处的演示演示：http://jsfiddle.net/Dvz9Y/2/