canvas学习总结五:线段的端点与连接点

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135281/article/details/76413474

我们在第三节中描述了线段的绘制,其中线段的属性lineWidth是用来改变线段的宽度。让我们来回忆下线宽的用法

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

上面的代码我们就可以绘制一条宽度为3像素的线段。

上一章我们还提到线宽与像素边界的内容主要为:  如果你在某2个像素的边界处绘制一条1像素宽的线段,那么该线段实际会占据2个像素的宽度;

因为当你在像素边界处绘制一条1像素宽度的垂直线段时,canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边。

然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,所以在左右两个方向上的半个像素都被扩展为1个像素。(具体内容可参考第三章内容);

今天这章内容我们用来看看线段的其它属性 lineCap,lineJoin。

线段的端点(lineCap)

在绘制线段时,你可以控制线段的端点,也就是 “线帽” (lineCap)的样子,在Canvas的绘图环境对象中,控制线段端点的属性正好也叫作lineCap。 线段端点的样式有三个值,分别是butt, roundm, square, 默认是为butt; round与square 都会给线段的端点画上一顶帽子。

  • butt:线段端点的默认样式
  • round:在端点处添加一个半圆,其半径是线宽的一半。
  • square: 在端点处添加一个矩形,长度与线宽一致,宽度是线宽的一半。

看到这里貌似我们也看不出什么名堂。那我们就先绘制出来,你就会瞬间明白了。要不怎么都说要数据可视化呢!

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';
    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();
    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();
    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

看到上面的图片是不是瞬间就知道了lineCap的属性值的样式,是不是也感受到了可视化的魅力。

线段的连接点(lineJoin)

在绘制线段或者矩形时,我们可以控制两条线段连接处的拐点,也就是线段的连接点。 在canvas绘图环境中线段的连接点是由 lineJoin属性控制的。 lineJoin属性也有三个值分别为: round, bevel, miter,默认是miter。

  • round:额外填充一个圆弧,圆弧为两条线段拐角的外边缘的点用圆弧连接而成,
  • bevel:额外填充一个三角形,三角形为两条线段拐角的外边缘的点用直线连接而成。
  • miter:额外填充一个多边形,多边形为两条线段拐角外边缘的延长线的交点形成。

同样我们绘制出来看一下

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';
    cxt.beginPath();
    cxt.lineJoin = 'round';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.lineTo(300, 60);
    cxt.stroke();
    cxt.beginPath();
    cxt.lineJoin = 'bevel';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.lineTo(300, 140);
    cxt.stroke();
    cxt.beginPath();
    cxt.lineJoin = 'miter';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.lineTo(300, 220);
    cxt.stroke();
}

我们再来看看线段连接点的具体构建方式

提示

当我们使用miter样式来绘制线段的连接点时,我们还可以指定一个miterLimit属性 miterLimit: 表示斜接线(miter)的长度与二分之一线宽的比值;

斜接线的计量方式如下图

从图中我们可以看出,如果两个线段的夹角很小的话,那么斜接线的长度有可能会变的非常长,它与二分之一线宽的比值就会超出你所指定的miterLimit的属性值,

这时候浏览器会将以bevel的方式来绘制线段的连接点。

总结

Canvas绘图环境中线段的相关属性

属性

描述

默认值

lineWidth

以像素为单位的线段宽度

非零的正数

1

lineCap

绘制线段的端点样式

butt,round,square

butt

lineJoin

线段连接点的样式

bevel,round,miter

miter

miterLimit

斜接线与二分之一线宽的比值

非零的正数

10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图形学与OpenGL

CG实验5 简单光照明模型

(1) 示范代码为立方体在一束平行光照射下的漫反射光照效果。结合示范代码,学习掌握简单光照明模型的基本原理与实现; (2) 修改示范代码,给出不同光照参数...

1503
来自专栏机器学习实践二三事

Python-OpenCV(4)

我想把 NBA 的标志放到另一幅图像(LBJ传球)上。但是现在有个问题: 如果我使用加法,颜色会改变,如果使用混合,会得到透明效果,但是我不想要透明的 ...

21310
来自专栏数据结构与算法

P1328 生活大爆炸版石头剪刀布

题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。在《生活大爆炸》第二季第8 集中出现了一种石头剪刀布的升级...

3597
来自专栏HT

基于HTML5的3D网络拓扑树呈现

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到...

26610
来自专栏数据小魔方

excel数据排序的常用方式

今天跟大家分享几种常用的数据排序方式! ▼ 在excel中整理数据、作图或者其他数据汇总操作,常会遇到对某一列数据排序的需求。当然用肉眼观察手动排序肯定是不现实...

43711
来自专栏逍遥剑客的游戏开发

M2文件头

1222
来自专栏hightopo

基于HT for Web的3D树的实现

1122
来自专栏walterlv - 吕毅的博客

用动画的方式画出任意的路径(直线、曲线、折现)

发布于 2017-11-20 00:49 更新于 2017-11...

1012
来自专栏HT

基于HT for Web的3D拓扑树的实现

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到...

2345
来自专栏菩提树下的杨过

Flash/Flex学习笔记(49):3D基础

之前我们所做的动画都是基于x,y二维坐标轴的,在三维动画中我们还需要增加一个垂直于屏幕“向里”或“向外”的Z轴,那么z轴到底是应该向外,还是向里呢?这个其实无所...

1916

扫码关注云+社区

领取腾讯云代金券