线条操作

在canvas中，常见的线条属性和方法如下所示：

lineWidth 定义线条宽度
lineCap 定义线帽样式
lineJoin 定义两线条连接处样式
setLineDash() 定义线条的虚实方式

lineWidth

语法：

cxt.lineWidth = 整数 (默认取值为1，单位px)

lineCap

语法：

cxt.lineCap = '属性值' (默认取值为butt（无线帽），round（圆形线帽），square（正方形线帽）)

lineJoin

语法：

cxt.lineJoin = '属性值' (默认取值为miter（尖角），round（圆角），bevel（斜角）)

预备代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
    }
</script>
</html>

效果图如下：

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

// 线条宽度
cxt.lineWidth = 10;
cxt.moveTo(100,100);
cxt.lineTo(100,180);
cxt.stroke();

// 线帽样式
cxt.beginPath();
cxt.lineWidth = 20;
cxt.lineCap = 'round';
cxt.moveTo(150,100);
cxt.lineTo(150,180);
cxt.stroke();

// 交接样式
cxt.beginPath();
cxt.lineWidth = 30;
cxt.lineCap = 'round';
cxt.lineJoin = 'square';
cxt.moveTo(200,100);
cxt.lineTo(200,180);
cxt.lineTo(250,180);
cxt.stroke();

效果图如下：

setLineDash()方法

语法：

cxt.setLineDash(array) (array表示一个数组)

常见的数组组合如：[10,5]，[5,5,]，[2,2] ，如果数组元素的个数为奇数，数组的元素会被重复复制至个数为偶数，如[5,10,15]会变成[5,10,15,5,10,15]

数组[10,5]表示“10px实线”和“5px虚线”，其他依次类推

关于setLineDash方法取不同值的测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
        let canvas = document.getElementById('canvas');
        let cxt = canvas.getContext('2d');

        function draw(array){
            cxt.beginPath();
            cxt.strokeStyle = "green";
            cxt.lineWidth = 5;
            cxt.setLineDash(array);
            cxt.moveTo(50,y);
            cxt.lineTo(250,y);
            cxt.stroke();
            y += 30;
        }

        let y = 50;

        draw([10,5]);
        draw([10,5,5,5]);
        draw([2,2]);
        draw([5,5]);

    }

    
</script>
</html>

效果图如下：

cxt.lineWidth = 4;
cxt.setLineDash([10,5]);
cxt.strokeStyle = 'red';
cxt.strokeRect(100,100,100,120);

效果图如下：

封面制作网站 ColorFu
文章内容参考莫振杰著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！

canvas学习--线条操作

线条操作

lineWidth

lineCap

lineJoin

setLineDash()方法