您的位置：首页 > Web前端 > JavaScript

HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形

2017-03-20 15:30 811 查看

啥也不说，先上示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角矩形</title>
</head>
<body>

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.bezierCurveTo(50,100,50,50,100,50);
ctx.lineTo(200,50);
ctx.bezierCurveTo(200,50,250,50,250,100);
ctx.lineTo(250,150);
ctx.bezierCurveTo(250,150,250,200,200,200);
ctx.lineTo(100,200);
ctx.bezierCurveTo(100,200,50,200,50,150);
ctx.closePath();
ctx.stroke();
</script>

</body>
</html>

运行效果:

下面我们详细说一下圆角的绘制：

图中的圆角部分可以看做是一段二次贝塞尔曲线，A、B、C三个点分别对应着这段曲线的起点、终点、控制点。这条曲线的斜率趋势是从AC线段的斜率逐渐变为CB的斜率，至于三次及以上的贝塞尔曲线大家可以自行百度或者看下这个贝塞尔曲线-维基百科。

html5中，canvas绘制二次和三次贝塞尔曲线的方法分别是quadraticCurveTo()、bezierCurveTo().

使用quadraticCurveTo方法画一条二次贝塞尔曲线，三个关键点分别为起点(startX,startY)、控制点(ctrlX,ctrlY
4000
)、终点(endX,endY)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.quadraticCurveTo(ctrlX,ctrlY,endX,endY);
ctx.stroke();

使用bezierCurveTo方法绘制一条三次贝塞尔曲线

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.bezierCurveTo(ctrlX1,ctrlY1,ctrlX2,ctrlY2,endX,endY);
ctx.stroke();

使用bezierCurveTo方法绘制相同的二次贝塞尔曲线则相对简练

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.bezierCurveTo(startX,startY,ctrlX,ctrlY,endX,endY);
ctx.stroke();

讲的比较简单，如有错误请及时指出，谢谢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript canvas html5

相关文章推荐

新的分享

章节导航