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

最新推荐文章于 2024-08-15 04:23:20 发布

Dale_Che

最新推荐文章于 2024-08-15 04:23:20 发布

阅读量3.6k

点赞数 2

分类专栏： Js学习文章标签： javascript canvas html5

本文链接：https://blog.csdn.net/qq_31318181/article/details/64126588

版权

本文通过实例代码展示了如何使用HTML5的Canvas API，结合贝塞尔曲线来绘制圆角矩形。重点讲解了二次贝塞尔曲线quadraticCurveTo()的用法，并提到了三次贝塞尔曲线bezierCurveTo()。内容简洁明了，适合初学者理解。

摘要由CSDN通过智能技术生成

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

<!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>

运行效果: