Canvas贝塞尔曲线和二次贝塞尔曲线

最新推荐文章于 2024-03-15 09:46:33 发布

华惜

最新推荐文章于 2024-03-15 09:46:33 发布

阅读量422

点赞数

文章标签： canvas 贝塞尔曲线

本文链接：https://blog.csdn.net/weixin_44966759/article/details/108735571

版权

贝塞尔曲线和二次曲线

贝塞尔曲线大概就是ps中钢笔工具那个曲线

quadraticCurveTo(cp1x, cp1y, x, y)

从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x，并y使用由指定的控制点cp1x和cp1y。

在这里插入图片描述

例子：

此示例显示了如何绘制二次贝塞尔曲线。


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// 起点和终点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   //起始点
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // 终点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
    </script>
</html>

效果图：

在这里插入图片描述

二次贝塞尔曲线

语法：

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

cp1x

第一个控制点的x轴坐标。

cp1y

第一个控制点的y轴坐标。

cp2x

第二个控制点的x轴坐标。

cp2y

第二个控制点的y轴坐标。

终点的x轴坐标。

终点的y轴坐标。

案例：

绘制一个三次贝塞尔曲线


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
//定义画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 将点定义为{x，y}
let start = { x: 50,    y: 20  };
let cp1 =   { x: 230,   y: 30  };
let cp2 =   { x: 150,   y: 80  };
let end =   { x: 250,   y: 100 };

// 三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

// 起始点和终止点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // 起始点
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // 终止点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // 控制点一
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // 控制点二
ctx.fill();
    </script>
</html>

效果图：

在这里插入图片描述

案例二：

渲染语音气球


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝塞尔曲线案例
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
  }
}
    </script>
</html>

效果图：
在这里插入图片描述

华惜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas贝塞尔曲线和二次贝塞尔曲线

贝塞尔曲线和二次曲线贝塞尔曲线大概就是ps中钢笔工具那个曲线quadraticCurveTo(cp1x, cp1y, x, y)从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x，并y使用由指定的控制点cp1x和cp1y。例子：此示例显示了如何绘制二次贝塞尔曲线。 <!DOCTYPE html><html><head> <meta charset="utf-8" /> </head><body o
复制链接

扫一扫