《canvas》之第4章线条操作

第4章线条操作

第4章线条操作

4.1 线条操作简介

线条操作属性

属性	说明
lineWidth	定义线条宽度
lineCap	定义线帽样式
lineJoin	定义两个线条交接处样式

线条操作方法

方法	说明
setLineDash()	定义线条的虚实样式

4.2 lineWidth属性

cxt.lineWidth = 整数;
1

默认1，默认单位px。

线条宽度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //lineWidth值为5
            //cxt.beginPath();
            cxt.moveTo(20, 20);
            cxt.lineTo(180, 20);
            cxt.lineWidth = 5;
            cxt.stroke();

            //lineWidth值为10
            cxt.beginPath();
            cxt.moveTo(20, 70);
            cxt.lineTo(180, 70);
            cxt.lineWidth = 10;
            cxt.stroke();

            //lineWidth值为15
            cxt.beginPath();
            cxt.moveTo(20, 120);
            cxt.lineTo(180, 120);
            cxt.lineWidth = 15;
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
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

曲线宽度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);
            cxt.lineWidth = 5;
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

假设线条宽度lineWidth，strokeRect()方法绘制矩形实际宽度为width+lineWidth，实际高度为height+lineWidth，arc()方法绘制圆形的实际半径为radius+lineWidth。

4.3 lineCap属性

定义线条开始处和结尾处的线帽样式。

cxt.lineCap = "属性值";
1

属性值	说明
butt	无线帽，默认
round	圆形线帽，半径为线宽一半
square	正方形线帽，宽度为线宽一半

线帽直线

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.lineWidth = 16;

            //lineCap值为默认值（butt）
            //cxt.beginPath();
            cxt.moveTo(20, 20);
            cxt.lineTo(180, 20);
            //cxt.lineCap = "butt";
            cxt.stroke();

            //lineCap值改为round
            cxt.beginPath();
            cxt.moveTo(20, 70);
            cxt.lineTo(180, 70);
            cxt.lineCap = "round";
            cxt.stroke();

            //lineCap值改为square
            cxt.beginPath();
            cxt.moveTo(20, 120);
            cxt.lineTo(180, 120);
            cxt.lineCap = "square";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.moveTo(50, 50);
            cxt.lineTo(100, 50);
            cxt.lineTo(50, 100);
            cxt.lineTo(100, 100);
            cxt.lineWidth = 12;
            cxt.lineCap = "round";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

4.4 lineJoin属性

定义线条交接处的样式。

cxt.lineJoin = "属性值";
1

属性值	说明
miter	尖角，默认
round	圆角，半径为线宽一半
bevel	斜角，对角线为线宽

直线交接样式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
			var yoffset = 100;

            cxt.lineWidth = 12;
			
            //cxt.beginPath();
            cxt.moveTo(50, 50);
            cxt.lineTo(100, 50);
            cxt.lineTo(50, 100);
            cxt.lineTo(100, 100);
            //cxt.lineJoin = "miter";
            cxt.stroke();
			
            cxt.beginPath();
            cxt.moveTo(50, 50+yoffset);
            cxt.lineTo(100, 50+yoffset);
            cxt.lineTo(50, 100+yoffset);
            cxt.lineTo(100, 100+yoffset);
            cxt.lineJoin = "round";
            cxt.stroke();
			
            cxt.beginPath();
            cxt.moveTo(50, 50+yoffset*2);
            cxt.lineTo(100, 50+yoffset*2);
            cxt.lineTo(50, 100+yoffset*2);
            cxt.lineTo(100, 100+yoffset*2);
            cxt.lineJoin = "bevel";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="350" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

4.5 setLineDash()方法

定义线条的虚实样式。

cxt.setLineDash(array);
1

array是一个数组组合。

[10, 5]表示10px实线，5px空白，Chrome、Firefox支持setLineDash()方法，IE不支持。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.strokeStyle = "red";
            cxt.setLineDash([10, 5]);
            cxt.strokeRect(50, 50, 80, 80);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

相关阅读:
【龙芯固件】ACPI表中I2C资源
 Centos 常用软件的安装与配置精简版
 本地搭建Stable-Diffusion 教程
 vue axios跨域
 通过 TiUP 部署 DM 集群的拓扑文件配置
 INA226 备忘
 智创未来 · 引领5G价值，广和通携5G AIoT创新应用亮相2022德国慕尼黑电子展
 Ubuntu系统启动异常【ACPI Error或重启黑屏或启动异常】
物理驱动深度学习方法总结
 单调栈与单调队列(线性复杂度优化)
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362855

《canvas》之第4章 线条操作

《canvas》之第4章 线条操作

第4章 线条操作

4.1 线条操作简介

4.2 lineWidth属性

4.3 lineCap属性

4.4 lineJoin属性

4.5 setLineDash()方法

《canvas》之第4章线条操作

《canvas》之第4章线条操作

第4章线条操作