贝塞尔曲线

最新推荐文章于 2023-12-03 02:45:00 发布

礼礼。

最新推荐文章于 2023-12-03 02:45:00 发布

阅读量75

点赞数

分类专栏： JS曲线文章标签：贝塞尔曲线 html5 javascript

本文链接：https://blog.csdn.net/weixin_45736311/article/details/113420724

版权

JS曲线专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.创建二次贝塞尔曲线
2.创建三次贝塞尔曲线
例如：1
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.strokeStyle="red";//红色路径
ctx.moveTo(20,150);//开始坐标
ctx.quadraticCurveTo(40,300,60,150); //(20,150)开始点坐标(40,300)控制点坐标；(60,150)结束点坐标
ctx.quadraticCurveTo(80,0,100,150);
ctx.quadraticCurveTo(120,300,140,150);
ctx.quadraticCurveTo(160,0,180,150);  
ctx.stroke();//结束

ctx.beginPath();
ctx.lineWidth="5";//黑色路径，宽度：5个像素；
ctx.strokeStyle="black";
ctx.moveTo(0,150);
ctx.lineTo(280,150);
ctx.stroke();

</script> 

</body>
</html>

2.三次
在这里插入图片描述

ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,90,100,90,20);
//其中：(20,20)起始坐标1；(20,100)控制坐标点2；(90,100)控制坐标点3；(90,20)终点坐标4，也是下一三次曲线的起始坐标；
ctx.bezierCurveTo(90,100,160,100,160,20);
ctx.bezierCurveTo(160,100,230,100,230,20);
ctx.stroke();

礼礼。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
贝塞尔曲线

1.创建二次贝塞尔曲线例如：<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.ge
复制链接

扫一扫