HTML5 Canvas 开发绘图方法整理【三、canvas线条样式、线帽】

青旅半醒 2022-05-31 08:35 261阅读 0赞

1、线条宽度  
ctx.lineWidth= 整数值 ;  
取值必须为整数，不写默认为1 ，单位默认是px ;

ctx.lineWidth=15; //绘制一条高度为15px的直线
        ctx.moveTo(120,30);
        ctx.lineTo(300,30);
        ctx.strokeStyle="#5DE8E0";
        ctx.stroke();

效果图：  
![这里写图片描述][70]

--------------------

2、线帽  
ctx.lineCap=属性值;  
默认butt 另外还有round 和 square 这两种，设置为这两种值的时候 线条会自动增加一部分长度，就是线帽的所在位置;  
（个人目测觉得square 和 butt 差距不大 只是加长了一点… round类似于CSS 里面的边框倒角）

//第一种不设置线帽
        ctx.lineWidth=15; 
        ctx.moveTo(120,30);
        ctx.lineTo(300,30);
        ctx.strokeStyle="#5DE8E0";
        ctx.stroke();
    
        //线帽1
        ctx.beginPath();
        ctx.lineWidth=25;
        ctx.lineCap="square";
        ctx.moveTo(120,100);
        ctx.lineTo(300,100);
        ctx.strokeStyle="#8B48DE";
        ctx.stroke();
    
        //线帽2
        ctx.beginPath();
        ctx.lineWidth=35;
        ctx.lineCap="round";
        ctx.moveTo(120,180);
        ctx.lineTo(300,180);
        ctx.strokeStyle="#E076F0";
        ctx.stroke();

效果图：  
![这里写图片描述][70 1]

#### 另外要注意一点 lineCap 只作用于开始处 和 结尾处 比如: ####

ctx.beginPath();
        ctx.lineWidth=10;
        ctx.lineCap="round";
        ctx.moveTo(410,180);
        ctx.lineTo(610,180);
        ctx.lineTo(410,300);
        ctx.lineTo(610,300);
        ctx.strokeStyle="#34AAFC";
        ctx.stroke();

效果图：  
![这里写图片描述][70 2]

继续往下看喽 (。＿ 。） ✎

--------------------

3、线条之间的交接  
ctx.lineJoin=属性值;

//想要线条连接处修改样式 用lineJoin   还是刚才那段代码
        ctx.beginPath();
        ctx.lineWidth=10;
        ctx.lineCap="round";
        ctx.moveTo(410,380);
        ctx.lineTo(610,380);
        ctx.lineTo(410,500);
        ctx.lineTo(610,500);
        ctx.lineJoin="round"; //只需在绘制完成前加一句即可；
        ctx.strokeStyle="#34AAFC";
        ctx.stroke();

![这里写图片描述][70 3]

--------------------

4、虚线实线  
ctx.setLineDash(Array);  
括号里的参数是一个数组，ctx.setLineDash(\[5,4\]); 表示“5px实线” “4px”的空白，这种用的较多；

还有一种是ctx.setLineDash(\[8,6,4,2\]); 表示 “8px实线” “6px”的空白 “4px实线” “2px”的空白，  
用的不多，了解即可。

ctx.lineWidth=2;
        ctx.strokeStyle="#FF4600";
        ctx.setLineDash([5,4]);
        ctx.moveTo(30,520);
        ctx.lineTo(400,520);
        ctx.stroke();

效果图：  
![这里写图片描述][70 4]

[70]: /images/20220531/97f7c9f5bc3443a4b04cd47aed41c126.png
[70 1]: /images/20220531/a018e1651df34ef5b9749f0a4377122e.png
[70 2]: /images/20220531/27144dcb9d1f482e9b70f4cc5bb71120.png
[70 3]: /images/20220531/7fad8a1abeea4c14800bc1eec2555e0c.png
[70 4]: /images/20220531/15554fb2327a4f0c89c26a709c92456e.png