canvas clip()

admin發表於2018-08-09
Canvas
clip翻譯成英文是切割的意思，的確名副其實，此方法具有切割功能。

它可以依照前面建立的路徑進行一次切割，然後所有在clip之後繪製的圖形只有在被切割的路徑內才會顯示，路徑外的則不得顯示。

看一個程式碼例項：

[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 type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.clip();
  ctx.beginPath();
  ctx.rect(100, 100, 100, 100);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="250"></canvas>
</body>
</html>

上面的程式碼中，首先通過arc方法繪製一個路徑，然後用clip方法進行切割。

後面繪製的圖形只會在這個切割的路徑內顯示。

就如同將一個遮罩覆蓋在牆上，然後在這個遮罩上摳掉一部分割槽域，如果想要在牆上繪製圖案，只能夠在這個摳除的部分進行操作。clip之後，這個遮罩切除效果一直都會存在，無論後面有多少路徑。

程式碼例項如下：

[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 type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.clip();
  ctx.beginPath();
  ctx.rect(100, 100, 100, 100);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = "#F00";
  ctx.arc(100, 100, 100, 0, Math.PI * 2);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="250"></canvas>
</body>
</html>

後面儘管有多個路徑，但是繪圖區域依然被限制在切割之前的路徑之內。

二.解除clip切割的限制：

使用save和restore方法可以解除clip()切割的顯示。

關於上述兩個方法具體用法可以參閱canvas save()和restore()方法一章節。

程式碼例項如下：

[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 type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.save();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.clip();
  ctx.beginPath();
  ctx.rect(100, 100, 100, 100);
  ctx.fill();
  ctx.restore();
  ctx.beginPath();
  ctx.fillStyle = "#F00";
  ctx.arc(100, 100, 100, 0, Math.PI * 2);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="250"></canvas>
</body>
</html>

再來看一段程式碼例項:

[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 type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.beginPath();
  ctx.clip();
  ctx.beginPath();
  ctx.rect(100, 100, 100, 100);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = "#F00";
  ctx.arc(100, 100, 100, 0, Math.PI * 2);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="350" height="250"></canvas>
</body>
</html>

上面的程式碼不能夠繪製任何圖案，這是因為clip()方法前面最近的beginPath()方法後面沒有繪製任何路徑，所以clip()方法也就不能夠切割任何路徑，也就是麼能在牆的遮罩上摳除任何區域，當然無法再牆面上繪圖了。

相關文章