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

贝塞尔曲线和二次曲线

贝塞尔曲线大概就是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>

效果图：

Canvas贝塞尔曲线和二次贝塞尔曲线相关推荐

使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线它也可以用来描述一个缓动算法,设置css的transition-timin ...
openGL参数曲面----二次贝塞尔曲线
openGL系列文章目录文章目录 openGL系列文章目录前言一.二次贝塞尔曲线参考前言在20 世纪50 年代和60 年代在雷诺公司工作期间,皮埃尔·贝塞尔(Pierre Bézier)开 ...
canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法
此博文不研究其算法,只记录下其用法. 首先是二次贝塞尔曲线! 函数是这样的 quadraticCurveTo(cpx, cpy, x, y); 其中cpx为贝塞尔控制点x: 其中cpy为贝塞尔控制点y ...
绘制二次贝塞尔曲线（二次贝兹曲线）等距线：让 IE 支持 canvas接口 isPointInPath
一.背景: 在使用 canvas 做知识图谱的时,实体关系使用线宽为 1px 的线绘制, 用户必须点在线上, 才能正常拾取到点击的边. 边关系,有些是直线边,有些是二次贝塞尔曲线.产品提议,线不能加粗 ...
【绘制】HTML5 Canvas二次方贝塞尔曲线，实现复选框对勾对号，实现圆角三角形，圆角矩形（图文，示例）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
如何求出二次贝塞尔曲线上面的各个点呢
1.需求:用 canvas 在上面的曲线上面加几个箭头,指明方向 2.问题:这个曲线我是第一次见,搞半天还发现不是圆的弧,是一种很奇怪的弧形,于是我就上网查 quadraticCurveTo 方法,才 ...
书小宅之网页设计——二次贝塞尔曲线和三次贝塞尔曲线
贝塞尔曲线起始点和终止点在曲线上,方向控制点不再曲线上.二次贝塞尔曲线有一个控制点,三次贝塞尔曲线有两个控制点. 二次贝塞尔曲线定义和用法 quadraticCurveTo() 方法通过使用表示二次 ...
绘制二次贝塞尔曲线的几种方式
1.通过turf.js插件绘制 import * as turf from "@turf/turf";//P1,p2为起终点 export default function two ...

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

贝塞尔曲线和二次曲线

二次贝塞尔曲线

Canvas贝塞尔曲线和二次贝塞尔曲线相关推荐

最新文章

热门文章