canvas 绘制圆角矩形

2018-11-20 13:24| 作者: admin| 查看: 3158| 评论: 0|来自: 蚂蚁部落

绘制矩形非常简单,具体参阅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()一章节。

肯定还有其他实现圆角矩形的方式,本文就不再探究,一方面由于懒惰。

另一方面感觉上述自定义方法已经够用,有探索精神的朋友可以文章底部留言,分享更好的方式。


鲜花

握手

雷人

路过

鸡蛋
返回顶部