建站
咨詢
售后
建站咨詢
新聞中心
很多時(shí)候，在使用 Canvas 繪制圓角矩形都是一件比較麻煩的事，因?yàn)橹安]有直接的方法，只能通過直線和圓弧間接組合而成，下面是一個(gè)常規(guī)繪制方式。
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坐標(biāo)、y坐標(biāo)、寬度、高度、圓角。
這段代碼應(yīng)該是最精簡(jiǎn)的了，雖然不是特別復(fù)雜，但是應(yīng)該很少有人能直接手寫，主要是不夠語(yǔ)義化，比較繁瑣。
而圓角矩形又是一個(gè)非常常見的功能需求，為此，Canvas 在Chrome 99悄悄推出了一個(gè)新的方法：roundRect()[1]，花一分鐘了解一下。
一、roundRect 語(yǔ)法
roundRect，顧名思義，就是圓角矩形，和rect[2]用法一致，只是參數(shù)上多了一個(gè)圓角radii。
這里x、y、w、h就不介紹了，重點(diǎn)介紹一下這個(gè)圓角radii。
圓角radii有以下幾種取值
- all-corners ，只有 1 一個(gè)值的時(shí)候，表示所有 4 個(gè)圓角
- [all-corners]，也可以是數(shù)組，當(dāng)只有 1 一個(gè)值的時(shí)候，也表示 4 個(gè)圓角
- [top-left-and-bottom-right, top-right-and-bottom-left]，數(shù)組為 2 個(gè)值的時(shí)候，表示左上、右下圓角 和 右上、左下圓角
- [top-left, top-right-and-bottom-left, bottom-right]，數(shù)組為 3 個(gè)值的時(shí)候，表示左上圓角、右上、左下圓角 和 右下圓角
- [top-left, top-right, bottom-right, bottom-left]，數(shù)組為 4 個(gè)值的時(shí)候，表示左上圓角、右上圓角 、 右下圓角和左下圓角
看似麻煩，其實(shí)就是和 CSS 中的圓角規(guī)則是一致的，稍微看一眼就能明白
下面來(lái)看具體的效果
二、roundRect 案例及細(xì)節(jié)
首先來(lái)看一個(gè)值的，可以滿足絕大部分情況。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.roundRect(20, 20, 150, 100, 10);
ctx.stroke();效果如下：
當(dāng)然這個(gè)值也是可以省略的，這樣就沒有圓角了，等同于rect
ctx.roundRect(20, 20, 150, 100);
效果如下：
再來(lái)看數(shù)組的情況，比如兩個(gè)值的，就像這樣。
ctx.roundRect(20, 150, 150, 100, [10, 40]);
效果如下：
再來(lái)看4個(gè)值的情況：
ctx.roundRect(200, 20, 150, 100, [0, 30, 50, 60]);
效果如下：
如果這個(gè)圓角非常大呢，超出了矩形的尺寸會(huì)怎么樣呢？
ctx.roundRect(200, 20, 150, 100, 300);
可以看到，這種情況也是完美適配，和 CSS 表現(xiàn)完全一致，變成了跑道形狀，效果如下：
還有需要注意的是，這個(gè)圓角不能為負(fù)數(shù)，否則直接報(bào)錯(cuò)。
完整代碼可以查看以下任意鏈接：
- canvas roundRect (juejin.cn)[3]
- canvas roundRect (codepen.io)[4]
- canvas roundRect (runjs.work)[5]
三、兼容性和polyfill
這個(gè)方法還比較新，也就是今年初才推出的，兼容性還不是特別好，如下：
除了firefox，其他主流瀏覽器都已經(jīng)兼容。
當(dāng)然也不用擔(dān)心，這個(gè)也是有polyfill的，如下：
??https://cdn.jsdelivr.net/gh/Kaiido/roundRect/roundRect.js??
其實(shí)實(shí)現(xiàn)上還是比較復(fù)雜的，考慮的情況非常多，各種臨界場(chǎng)景，參數(shù)的數(shù)量。這也是為什么推薦用原生 API 的原因的，語(yǔ)法容錯(cuò)性太強(qiáng)了！
四、你記住了嗎
下次繪制圓角矩形就可以考慮這個(gè)方法了，至少心里有個(gè)備選方案，兼容性倒是其次，最后再來(lái)回顧一下：
圓角可以是一個(gè)數(shù)組，規(guī)則就參考 CSS 圓角規(guī)則就行了。
參考資料：
[1]roundRect(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
[2]rect: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect
[3]canvas roundRect (juejin.cn): https://code.juejin.cn/pen/7178419723002970145
[4]canvas roundRect (codepen.io): https://codepen.io/xboxyan/pen/wvxwbWv
[5]canvas roundRect (runjs.work): https://runjs.work/projects/1ceee49205914def
分享名稱：原來(lái)Canvas也能直接繪制圓角矩形了
文章出自：http://www.dlmjj.cn/article/cddsioh.html
