canvas笔记-lineJoin和miterLimit的使用


lineJoin是线条与线条连接时的效果

lineJoin有如下参数

miter(default)

bevel

round

下面对各个参数进行展示！

默认情况下：

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
    window.onload = function() {

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");
        context.lineWidth = 10;


        drawStar(context, 150, 300, 400, 400, 0);

    }

    function drawStar(cxt, r, R, x, y, rot){

        cxt.beginPath();
        for(let i = 0; i < 5; i++){

            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                -Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);

            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
        }

        cxt.closePath();
        cxt.stroke();
    }

</script>

</body>
</html>

当lineJoin为bevel时

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
    window.onload = function() {

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.lineJoin = "bevel";

        drawStar(context, 150, 300, 400, 400, 0);

    }

    function drawStar(cxt, r, R, x, y, rot){

        cxt.beginPath();
        for(let i = 0; i < 5; i++){

            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                -Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);

            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
        }

        cxt.closePath();
        cxt.stroke();
    }

</script>

</body>
</html>

当个lineJoin为round时

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
    window.onload = function() {

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.lineJoin = "round";

        drawStar(context, 150, 300, 400, 400, 0);

    }

    function drawStar(cxt, r, R, x, y, rot){

        cxt.beginPath();
        for(let i = 0; i < 5; i++){

            cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                -Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);

            cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
        }

        cxt.closePath();
        cxt.stroke();
    }

</script>

</body>
</html>

这里当个lineJoin为miter时，一代miterlimit超过10，就会默认改变为bevel。重新设置如下：

1
context.miterLimit = 20

miterLimit默认值为10

miterLimit的值如下：