canvas 繪製圓角矩形

admin發表於2018-11-20
Canvas

繪製矩形非常簡單，具體參閱canvas 繪製矩形一章節。

canvas並沒有提供可以直接繪製圓角矩形的方法。

不過可以利用一些屬性來巧妙實現，或者自定義繪製圓角矩形的方法。

一.lineJoin實現圓角：

利用此屬性可以實現視覺上的圓角效果。

關於此屬性的具體用法可以參閱canvas lineJoin 屬性一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth=10;
  ctx.lineJoin="round";
  ctx.strokeRect(10,10,100,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/132531us7ugvgsqthvg5qm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

lineJoin屬性完全是無心插柳柳成蔭，原本功能並不是為了實現圓角矩形。

但是它的功能特點恰恰滿足了繪製圓角矩形的功能。

缺點也非常明顯，沒法很自由舒暢的對矩形圓角進行調節。

二.自定義繪製方法：

下面分享一個自定義方法，它實現了圓角矩形的繪製功能。

與使用lineJoin屬性相比，它更加靈活強大。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  var ctx = canvas.getContext("2d");
  //圓角矩形
  function roundRect(x, y, w, h, r) {
    if (w< 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
  }
  roundRect(200, 300, 200, 120, 20);
  ctx.stroke()
}
</script>
</head>
<body>
<canvas id="ant" width="600" height="550"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/132558abo0rro9grfnnqom.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼自定義roundRect方法實現繪製圓角矩形效果。

方法引數分析如下：

（1）.x：矩形左上角的橫座標（非圓角矩形時左上角橫座標）。

（2）.y：矩形左上角的縱座標（非圓角矩形時左上角縱座標）。

（3）.w：矩形的寬度。

（4）.h：矩形的高度。

（5）.r：圓角所處圓的半徑尺寸。理解上面自定義方法的關鍵在於對它所用到方法的理解。

具體參閱如下幾篇文章：

（1）.beginPath方法參閱canvas beginPath()一章節。

（2）.moveTo方法參閱canvas moveTo()一章節。

（3）.arcTo方法參閱canvas arcTo()一章節。

（4）.closePath方法參閱canvas closePath()一章節。

肯定還有其他實現圓角矩形的方式，本文就不再探究，一方面由於懶惰。

另一方面感覺上述自定義方法已經夠用，有探索精神的朋友可以文章底部留言，分享更好的方式。

相關文章