《canvas》之第10章 canvas路径

第10章 canvas路径

第10章 canvas路径

10.1 什么是路径

方法	说明
beginPath()	开始一条新路径
closePath()	关闭当前路径
isPointInPah()	判断点是否存在于当前路径内

10.2 beginPath()方法和closePath()方法

beginPath()方法和closePath()方法，只运用于canvas基本图形的绘制。

10.2.1 beginPath()方法

canvas基于状态绘制图形，每次绘制（stroke()或fill()），检查当前状态的所有值（strokeStyle、fillStyle、lineWidth等）。

cxt.beginPath();
1

beginPath()开始新路径，则不同路径使用不同值。
未使用beginPath()开始新路径，后面的值会覆盖前面的值。
未开始新路径（所有cxt.strokeStyle = “blue”）

<!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 = 5;

            //第1条直线
            cxt.moveTo(50, 40);
            cxt.lineTo(150, 40);
            cxt.strokeStyle = "red";
            cxt.stroke();

            //第2条直线
            cxt.moveTo(50, 80);
            cxt.lineTo(150, 80);
            cxt.strokeStyle = "green";
            cxt.stroke();

            //第3条直线
            cxt.moveTo(50, 120);
            cxt.lineTo(150, 120);
            cxt.strokeStyle = "blue";
            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

开始新路径（cxt.strokeStyle不同）

<!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 = 5;

            //第1条直线
            cxt.beginPath(); //可省略第一条路径
            cxt.moveTo(50, 40);
            cxt.lineTo(150, 40);
            cxt.strokeStyle = "red";
            cxt.stroke();

            //第2条直线
            cxt.beginPath();
            cxt.moveTo(50, 80);
            cxt.lineTo(150, 80);
            cxt.strokeStyle = "green";
            cxt.stroke();

            //第3条直线
            cxt.beginPath();
            cxt.moveTo(50, 120);
            cxt.lineTo(150, 120);
            cxt.strokeStyle = "blue";
            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

10.2.2 closePath()方法

关闭路径，路径起点和终点连接起来，成为封闭图形。

cxt.closePath();
1

圆弧与扇形

<!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, true);
			//cxt.closePath();
            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

箭头

<!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(40, 60);
            cxt.lineTo(100, 60);
            cxt.lineTo(100, 30);
            cxt.lineTo(150, 75);
            cxt.lineTo(100, 120);
            cxt.lineTo(100, 90);
            cxt.lineTo(40, 90);
			//cxt.closePath();//cxt.lineTo(40, 60);
            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

beginPath()配合closePath()使用

<!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.beginPath();
            cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
            cxt.closePath();
            cxt.strokeStyle = "red";
            cxt.stroke();

            //cxt.beginPath();
            cxt.arc(70, 120, 50, 0, -90 * Math.PI / 180, true);
            cxt.closePath();
            cxt.strokeStyle = "blue";
            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

未使用closePath()绘制封闭图形

<!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 = 10;

            //cxt.beginPath();
            cxt.moveTo(40, 60);
            cxt.lineTo(100, 60);
            cxt.lineTo(100, 30);
            cxt.lineTo(150, 75);
            cxt.lineTo(100, 120);
            cxt.lineTo(100, 90);
            cxt.lineTo(40, 90);
            cxt.lineTo(40, 60);
            //cxt.closePath();
            cxt.strokeStyle = "HotPink";
            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

10.3 isPointInPah()方法

判断点是否存在于当前路径，不支持strokeRect()和fillRect()，只能用rect()代替。

cxt.isPointInPah(x, y);
1

<!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 = "HotPink";
            cxt.rect(50, 50, 80, 80);
            cxt.stroke();
            //cxt.strokeRect(50, 50, 80, 80);
            if (cxt.isPointInPath(100, 50)) {
                alert("点(100,100)存在于当前路径中");
            }
        }
    </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

Google和Firefox不支持点在直线上的判断，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.moveTo(50, 50);
            cxt.lineTo(150, 50);
            cxt.stroke();
            if (cxt.isPointInPath(100, 50)) {
                alert("点(50,100)存在于当前路径中");
            }
        }
    </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

相关阅读:
【21天算法挑战赛】排序算法——直接插入排序
 python中的各种打断方式、终止代码
 TRC丨艾美捷TRC单羟基舒更葡糖钠
 linux下mv命令移动目录的二种情况
 EntityUtils MapStruct BeanCopier 数据实体类转换工具 DO BO VO DTO 附视频
 Java 中的日期时间总结
 触摸屏驱动
 保姆级qt开发环境配置
 Mock安装及应用
 HashTable HashMap 区别
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362908