代码之家 › 专栏 › 技术社区 › Mystical

为什么有划边的矩形会超出画布?

canvas javascript

Mystical · 技术社区 · 6 年前

我一直在尝试 <帆布> 最近,我注意到一个奇怪的行为,当抚摸矩形 接近原点 (0, 0) 画布的

// canvas context
var ctx = document.querySelector('#screen').getContext('2d');

// draw a rectangle
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 100);

// stroke a border for the rectangle
ctx.lineWidth = 20;
ctx.strokeRect(0, 0, 100, 100);

<canvas id="screen"></canvas>

怎么了?

在上面的示例中,矩形本身绘制在 (0,0) 如预期的那样,但它的边框(笔划矩形)似乎是在偏移处绘制的。

通常,当在远离原点的位置移动矩形时,忽略此效果。- 也就是说,不从指定的位置开始绘制笔划矩形,而是在偏移位置绘制。

为什么会这样?

1 回复 | 直到 6 年前

Dacre Denny 6 年前

笔画的中心是围绕你的原稿定义的坐标。对于笔画宽度为 20的矩形,在画布左上角绘制该矩形将导致在画布边界外绘制笔画宽度的一半。

调整 strokerect()的坐标 to 10,10,..。 causes the rectangle to be offset from the canvas origin,meansing that the full stroke of 20 pixels will be visible from the top left of the canvas:。


   
    
     
      
       ctx.linewidth=20;
行程(10,10,100,100);
< /代码> 

考虑以下调整,以确保在绘制的矩形周围完全可见笔划:



var canvas=document.queryselector('screen');

//设置宽度和高度以指定画布的尺寸(像素)
//选择一个100x100平方与下面绘制的strokerect()匹配,
//因此实现对称笔画的外观
canvas.width=100;
canvas.height=100;

//画布上下文
var ctx=canvas.getContext(“2d”);

//绘制矩形
ctx.fillstyle='橙色';
填充(10,10,90,90);

//为矩形绘制边框
ctx.linewidth=20;

var半行程=ctx.linewidth*0.5;

ctx.strokerect(半冲程,半冲程,100-(半冲程*2),100-(半冲程*2));>




更新< /H3>

以下是相对于线/矩形边的笔画可视化,由ibrahim mahrir提供:



在画布的左上角使用此选项将导致一半的笔划宽度绘制在画布边界之外。

调整的坐标strokeRect()到10,10,..使矩形从画布原点偏移,这意味着二十从画布左上角可以看到像素:

ctx.lineWidth = 20;
ctx.strokeRect(10, 10, 100, 100);


考虑以下调整,以确保在绘制的矩形周围完全可见笔划:



var canvas = document.querySelector('#screen');

// Set the width and height to specify dimensions of canvas (in pixels)
// Choosing a 100x100 square matches the strokeRect() drawn below and
// therefore achieves the appearance of a symmetric stroke    
canvas.width = 100;
canvas.height = 100;

// canvas context
var ctx = canvas.getContext('2d');

// draw a rectangle
ctx.fillStyle = 'orange';
ctx.fillRect(10, 10, 90, 90);

// stroke a border for the rectangle
ctx.lineWidth = 20;

var halfStroke = ctx.lineWidth * 0.5;

ctx.strokeRect(halfStroke, halfStroke, 100 - (halfStroke * 2), 100 - (halfStroke * 2));
<canvas id="screen"></canvas>




更新

以下是相对于由提供的线条/矩形边缘的笔划可视化Ibrahim Mahrir: