原來 Canvas 也能直接繪製圓角矩形了

XboxYan發表於2022-12-19
Canvas
歡迎關注我的公眾號：前端偵探

很多時候，在使用 Canvas 繪製圓角矩形都是一件比較麻煩的事，因為之前並沒有直接的方法，只能透過直線和圓弧間接組合而成，下面是一個常規繪製方式

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();
這裡x、y、w、h、r分別代表x座標、y座標、寬度、高度、圓角。

這段程式碼應該是最精簡的了，雖然不是特別複雜，但是應該很少有人能直接手寫，主要是不夠語義化，比較繁瑣。

而圓角矩形又是一個非常常見的功能需求，為此，Canvas 在Chrome 99悄悄推出了一個新的方法：roundRect()，花一分鐘瞭解一下

一、roundRect 語法

roundRect，顧名思義，就是圓角矩形，和rect用法一致，只是引數上多了一個圓角radii

image-20221218183223938

這裡x、y、w、h就不介紹了，重點介紹一下這個圓角radii。

圓角radii有以下幾種取值

  • all-corners ，只有 1 一個值的時候，表示所有 4 個圓角
  • [all-corners]，也可以是陣列，當只有 1 一個值的時候，也表示 4 個圓角
  • [top-left-and-bottom-right, top-right-and-bottom-left]，陣列為 2 個值的時候，表示左上、右下圓角 和 右上、左下圓角
  • [top-left, top-right-and-bottom-left, bottom-right]，陣列為 3 個值的時候，表示左上圓角、右上、左下圓角 和 右下圓角
  • [top-left, top-right, bottom-right, bottom-left]，陣列為 4 個值的時候，表示左上圓角、右上圓角 、 右下圓角和左下圓角

看似麻煩，其實就是和 CSS 中的圓角規則是一致的，稍微看一眼就能明白

下面來看具體的效果

二、roundRect 案例及細節

首先來看一個值的，可以滿足絕大部分情況

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.roundRect(20, 20, 150, 100, 10);
ctx.stroke();

效果如下

image-20221218170317763

當然這個值也是可以省略的，這樣就沒有圓角了，等同於rect

ctx.roundRect(20, 20, 150, 100);

效果如下

image-20221218172019784

再來看陣列的情況，比如兩個值的，就像這樣

ctx.roundRect(20, 150, 150, 100, [10, 40]);

效果如下

image-20221218172336989

再來看4個值的情況

ctx.roundRect(200, 20, 150, 100, [0, 30, 50, 60]);

效果如下

image-20221218172546487

如果這個圓角非常大呢，超出了矩形的尺寸會怎麼樣呢？

ctx.roundRect(200, 20, 150, 100, 300);

可以看到，這種情況也是完美適配，和 CSS 表現完全一致，變成了跑道形狀，效果如下

image-20221218172946532

還有需要注意的是，這個圓角不能為負數，否則直接報錯

image-20221218180429056完整程式碼可以檢視以下任意連結

三、相容性和polyfill

這個方法還比較新，也就是今年初才推出的，相容性還不是特別好，如下

image-20221218175723772

除了firefox，其他主流瀏覽器都已經相容。

當然也不用擔心，這個也是有polyfill的，如下

https://cdn.jsdelivr.net/gh/K...

其實實現上還是比較複雜的，考慮的情況非常多，各種臨界場景，引數的數量。這也是為什麼推薦用原生 API 的原因的，語法容錯性太強了！

四、你記住了嗎

下次繪製圓角矩形就可以考慮這個方法了，至少心裡有個備選方案，相容性倒是其次，最後再來回顧一下

image-20221218183250050

圓角可以是一個陣列，規則就參考 CSS 圓角規則就行了。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤

歡迎關注我的公眾號：前端偵探

相關文章