canvas isPointInPath()方法

admin發表於2018-08-09
Canvas

此方法可以判斷一個座標是否位於路徑之中。

如果位於路徑之中，則返回true，否則返回false。

首先要明確一下哪些地方是路徑區域，也就是可填充區域，具體參閱canvas非零繞組規則與奇偶規則一章節。

canvas的互動能力是比較弱的，很多簡單的效果，在canvas中實現起來都相對複雜一些。

比如當滑鼠懸浮於一個路徑之上，這個路徑會填充不同的顏色，滑鼠離開路徑，又會填充另一種顏色。

那麼這時候isPointInPath()方法的作用就體現出來了，我們可以判斷當前滑鼠的座標是否位於指定路徑之內。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById('canvas');
  var ctx = cvs.getContext('2d');
  function draw(color) {
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.rect(10,10,100,100);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill()
  }
  draw();
  cvs.onmousemove = function (e) {
    var x = e.offsetX, y = e.offsetY;
    if (ctx.isPointInPath(x, y)) {
      draw("green");
    } else {
      draw()
    }
  }
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas><br/>
</body>
</html>

程式碼演示了isPointInPath()方法的功能，上面的程式碼是比較耗費效能的，因為每一次滑鼠移動都會重繪圖形，但是這裡暫時不涉及效能問題，。下面再通過程式碼例項介紹一下文章開頭提到的路徑問題。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="550" height="450"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.moveTo(300, 190);
context.lineTo(300, 270);
context.stroke();
 
function drawTwoArcs() {
  context.beginPath();
  context.arc(300, 190, 150, 0, Math.PI * 2, false);
  context.arc(300, 190, 100, 0, Math.PI * 2, true);
  context.fill();
  if (context.isPointInPath(300, 270)) {
    alert("螞蟻部落")
  }
}
function draw() {
  context.shadowColor = "rgba(0,0,0,0.8)";
  context.shadowOffsetX = 12;
  context.shadowOffsetY = 12;
  context.shadowBlur = 15;
  drawTwoArcs();
}
context.fillStyle = "rgba(100,140,230,0.5)";
draw();
</script>
</body>
</html>

特別說明：判斷座標（300,270）是否在路徑中；做了一個輔助線，便於演示。

上面不能夠彈出對話方塊，說明座標不在路徑中，只有座標點位於淺藍色區域才會彈出對話方塊，因為淺藍色區域才是路徑區域，是可填充的。

相關文章