Canvas学习:线型

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

绘制线段一文中,了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段,但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。

Canvas中的线型主要包括线宽线段端点线段连接点三个部分。那么咱们先来了解线宽。

线宽

通过前面的示例,我们不难发现,在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值,在没有显式设置lineWidth的值时,为以默认值1来确定线段的粗细。

那什么叫线宽呢?在Canvas中,线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应,当需要获得精确的水平或垂直线的时候要特别注意。

想要获得精确的线条,必须对线条是如何绘制出来的有所理解。比如下图,用网格来代表canvas的坐标格,每一格对应屏幕上一个像素点。在左侧图中,填充了(2,1)5,5的矩形,整个区域的边界刚好落在像素边缘上,这样得到的矩形有着清晰的边缘。如果你想要绘制一条从(3,1)(3,5),宽度是1.0的线条,就会得到下图中间图一样的结果。实际填充区域(深蓝色部分)仅仅延伸至路径两旁各一半像素,而这半个像素以会以近似的方式进行渲染,这意味着那些像素只是部分着色,结果就是以实际笔触颜色一半色调的颜色来填充整个区域(浅蓝和深蓝的部分)。这就是上例中为何宽度为1.0的线并不准确的原因。要解决这个问题,必须对路径施予更加精确的控制。已经知道1.0的线条会在路径两边各延伸0.5个像素,那么像下图最右侧的那样绘制的线条(从(3.5,1)(3.5,5)),其边缘正好落在像素边界,填充出来就是准确的宽为1.0的线条。

特别注意,在Canvas中绘制1个像素的线条时,坐标位置需要错开0.5个像素。

另外在Canvas中绘制路径(线段)时,后面显式设置的lineWidth会覆盖前面的值。比如:

function drawScreen () {
    ctx.strokeStyle = "red";
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(300,30);
    ctx.stroke();

    ctx.lineWidth = 40;
    ctx.beginPath();
    ctx.moveTo(30,60);
    ctx.lineTo(300,60);
    ctx.stroke();

}

线段端点

在绘制线段时,可以控制线段端点,这个线段端点也称为线帽。在Canvas的绘图环境中,控制线段端点绘制有一个属性叫CanvasRenderingContext2D.lineCap

CanvasRenderingContext2D.lineCap有三个值:buttroundsquare,其中默认的值是butt

  • butt:线段末端以方形结束
  • round:线段末端以圆形结束
  • square:线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域

来看一个小示例:

ctx.lineWidth = 30;
ctx.beginPath();
ctx.lineCap = 'butt';
ctx.moveTo(30,30);
ctx.lineTo(400,30);
ctx.fillText('butt', 410, 40);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(30,100);
ctx.lineTo(400,100);
ctx.fillText('round', 430, 110);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/canvas-line-style.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部