中isPointInPath()方法在不一樣繪製內容中的效果

時間  2019-12-07
標籤 ispointinpath 方法 不一樣 繪製 內容 效果 简体版
原文   原文鏈接

 <canvas>是HTML5中新增長的一個元素，咱們可使用腳本（一般使用JavaScript）在上面繪製圖形，就像個畫布同樣。咱們能夠用它來繪製圖表、製做一些動畫。默認大小爲300px × 150px。canvas

 在<canvas>中繪製圖形的方法中，isPointInPath()方法用於檢測指定的點是否在繪製圖形的路徑中，存在返回ture，不存在返回false。瀏覽器

注：在代碼部分，紅色加粗部分是重點要注意的內容哦！ 動畫

 

在矩形中

在畫布上繪製一個空心矩形，而後指定一個點，若是這個點在矩形的路徑中，矩形的顏色爲藍色，不然爲黑色。爲了能清楚的看到那個點在哪裏，咱們後面再畫上兩條灰色的線，交叉的位置就是咱們指定的點：spa

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //矩形
10         ctx.beginPath();
11         ctx.rect(10,20,280,20);       　　　 //繪製矩形區域
12         if(ctx.isPointInPath(50,25)) {      //判斷(50,25)是否在矩形路徑中
13             ctx.strokeStyle = "#0000FF";    //在則矩形是藍色
14         }
15         else {
16             ctx.strokeStyle = "#000000";    //不在則矩形是黑色
17         }
18         ctx.stroke();
19         
20         //繪製定位用的直線
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(50,0);
24         ctx.lineTo(50,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,25);
28         ctx.lineTo(300,25);
29         ctx.stroke();
30     </script>
31 </body>

運行效果以下：3d

 

能夠看到，咱們定位的點再矩形區域內部，矩形的顏色變成了藍色，也就是說這個點的位置在矩形的路徑中。code

 

在弧/曲線區域中

那咱們再arc()建立的弧/曲線區域中定位試試看。以後也是使用兩條灰色線交叉定位咱們判斷的點：blog

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲線
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);    //繪製圓形區域
12         if(ctx.isPointInPath(170,55)) {        //判斷(170,55)是否在矩形路徑中
13             ctx.strokeStyle = "#0000FF"; 　　   //在則曲線是藍色
14         }
15         else {
16             ctx.strokeStyle = "#000000";       //不在則曲線是黑色
17         }
18         ctx.stroke();
19         
20         //繪製定位用的直線
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(170,0);
24         ctx.lineTo(170,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,55);
28         ctx.lineTo(300,55);
29         ctx.stroke();
30     </script>
31 </body>

運行效果以下：
ip

 

哦，圓仍是藍色的，說明定位是在路徑中的。。。不對，這樣子看上去好像沒有閉合啊，那咱們給它填充一下顏色（換成fill()）：get

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲線
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);  //繪製圓形區域
12         if(ctx.isPointInPath(170,55)) {      //判斷(170,55)是否在矩形路徑中
13             ctx.fillStyle = "#0000FF";       //在則曲線是藍色
14         }
15         else {
16             ctx.fillStyle = "#000000";      //不在則曲線是黑色
17         }
18         ctx.fill();
19         
20         //繪製定位用的直線
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(170,0);
24         ctx.lineTo(170,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,55);
28         ctx.lineTo(300,55);
29         ctx.stroke();
30     </script>
31 </body>

嗯，是沒有超過區域，那咱們讓超過區域看看class

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //弧/曲線
10         ctx.beginPath();
11         ctx.arc(150,75,50,0,1.5 * Math.PI);    //繪製圓形區域
12         if(ctx.isPointInPath(180,45)) {        //判斷(180,45)是否在矩形路徑中
13             ctx.fillStyle = "#0000FF";        //在則曲線是藍色
14         }
15         else {
16             ctx.fillStyle = "#000000";        //不在則曲線是黑色
17         }
18         ctx.fill();
19         
20         //繪製定位用的直線
21         ctx.beginPath();
22         ctx.strokeStyle = "#CCCCCC";
23         ctx.moveTo(180,0);
24         ctx.lineTo(180,150);
25         ctx.stroke();
26         ctx.beginPath();
27         ctx.moveTo(0,45);
28         ctx.lineTo(300,45);
29         ctx.stroke();
30     </script>
31 </body>

變黑了，說明這個點再也不路徑中。

 

在直線中

 接下來就到最簡單的線條了。其實寫這個筆記就是由於這個線條來着┑(￣ ▽ ￣)┍

使用moveTo()和lineTo()結合，建立一根直線，定位點在路徑中直線爲藍色，不然爲黑色。使用一條灰色線交叉定位咱們判斷的點：

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直線
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         if(ctx.isPointInPath(150,40)) {        //判斷(150,40)是否在矩形路徑中
14             ctx.strokeStyle = "#0000FF";       //在則直線是藍色
15         }
16         else {
17             ctx.strokeStyle = "#000000";       //不在則直線是黑色
18         }
19         ctx.stroke();
20         
21         //繪製定位用的直線
22         ctx.beginPath();
23         ctx.strokeStyle = "#CCCCCC";
24         ctx.moveTo(150,0);
25         ctx.lineTo(150,150);
26         ctx.stroke();
27     </script>
28 </body>

欸，怎麼是黑色的啊，我不是定位點的y軸和線條兩個點的y軸都重合了麼？

就是這個狀況，定位點若是定位在使用moveTo()和lineTo()繪製的直線中間自動生成的線上，是會返回false的！

 那把定位點徹底重合moveTo()的點試試看：

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直線
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         if(ctx.isPointInPath(40,40)) {        //判斷(40,40)是否在直線路徑中
14             ctx.strokeStyle = "#0000FF";    //在則直線是藍色
15         }
16         else {
17             ctx.strokeStyle = "#000000";    //不在則直線是黑色
18         }
19         ctx.stroke();
20         
21         //繪製定位用的直線
22         ctx.beginPath();
23         ctx.strokeStyle = "#CCCCCC";
24         ctx.moveTo(40,0);
25         ctx.lineTo(40,150);
26         ctx.stroke();
27     </script>
28 </body>

藍了，藍了，它藍了！

 

那接下來咱們用moveTo()和lineTo()作一個閉合的圖形康康，定位就設在一條邊中間，用兩條灰色的線條交叉標記咱們定位的點：

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直線
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineTo(260,130);
14         ctx.closePath();
15         if(ctx.isPointInPath(150,40)) {        //判斷(150,40)是否在路徑中
16             ctx.fillStyle = "#0000FF";    //在則直線是藍色
17         }
18         else {
19             ctx.fillStyle = "#000000";    //不在則直線是黑色
20         }
21         ctx.fill();
22         
23         //繪製定位用的直線
24         ctx.beginPath();
25         ctx.strokeStyle = "#CCCCCC";
26         ctx.moveTo(150,0);
27         ctx.lineTo(150,150);
28         ctx.stroke();
29 
30         ctx.beginPath();
31         ctx.moveTo(0,40);
32         ctx.lineTo(300,40);
33         ctx.stroke();
34     </script>
35 </body>

這個區域這個時候是藍的了。也就是說不是閉合區域的時候，moveTo()和lineTo()中的線條是不算在區域內的，得閉合後纔算。（對於這個觀點，其實我是以爲有點怪怪的，感受這個觀點應該是接近正確答案但它不是正確答案）

 

在加粗的直線末端中

 

假如線條寬度有20px，上面咱們知道只有和路徑點重合了纔算，那加粗的線條仍是和路徑點重合了算仍是路徑點y軸（假設是橫線，那麼就當它是長方形吧，豎這的邊上任意一點）也算，這也是剛剛忽然想到的，試試看：

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直線
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineWidth = 40;
14         if(ctx.isPointInPath(40,35)) {        //判斷(40,35)是否在矩形路徑中
15             ctx.strokeStyle = "#0000FF";    //在則直線是藍色
16         }
17         else {
18             ctx.strokeStyle = "#000000";    //不在則直線是黑色
19         }
20         ctx.stroke();
21         
22         //繪製定位用的直線
23         ctx.beginPath();
24         ctx.lineWidth = 1;
25         ctx.strokeStyle = "#CCCCCC";
26         ctx.moveTo(40,0);
27         ctx.lineTo(40,150);
28         ctx.stroke();
29 
30         ctx.beginPath();
31         ctx.moveTo(0,35);
32         ctx.lineTo(300,35);
33         ctx.stroke();
34     </script>
35 </body>

看起來仍是得和路徑點重合。

那加粗後閉合呢？

 1 <body>
 2     <canvas id="drawEle">
 3         您的瀏覽器不支持該標籤
 4     </canvas>
 5     <script>
 6         var c = document.getElementById("drawEle");
 7         ctx = c.getContext("2d");
 8 
 9         //直線
10         ctx.beginPath();
11         ctx.moveTo(40,40);
12         ctx.lineTo(260,40);
13         ctx.lineTo(260,130);
14         ctx.closePath();
15         ctx.lineWidth = 40;
16         if(ctx.isPointInPath(40,35)) {        //判斷(40,35)是否在矩形路徑中
17             ctx.f = "#0000FF";    //在則直線是藍色
18         }
19         else {
20             ctx.strokeStyle = "#000000";    //不在則直線是黑色
21         }
22         ctx.stroke();
23         
24         //繪製定位用的直線
25         ctx.beginPath();
26         ctx.lineWidth = 1;
27         ctx.strokeStyle = "#CCCCCC";
28         ctx.moveTo(40,0);
29         ctx.lineTo(40,150);
30         ctx.stroke();
31 
32         ctx.beginPath();
33         ctx.moveTo(0,35);
34         ctx.lineTo(300,35);
35         ctx.stroke();
36     </script>
37 </body>

沒有區別，也就是說加粗的部分並不算在路徑內。

 

 

參考資料：MDN - Canvas​Rendering​Context2D.isPoint​InPath() : https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程