canvas学习笔记-贝塞尔曲线
3.4 贝塞尔曲线
canvas提供了两个绘制贝塞尔曲线api:
- ctx.quadraticCurveTo(cpx, cpy, x, y);
二次贝塞尔曲线,(cpx, cpy)控制点 (x, y)终点
- ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
三次贝塞尔曲线,(cp1x, cp1y)控制点一, (cp2x, cp2y)控制点二, (x, y)终点
题外话:
贝塞尔曲线的数学基础是早在 1912 年就广为人知的伯恩斯坦多项式。最早用来辅助汽车车体的工业设计。
CSS3的transition-timing-function属性,取值就可以设置为一个三次贝塞尔曲线方程transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
。
canvas绘图示例:
// 二次
ctx.moveTo(200, 100);
ctx.quadraticCurveTo(230, 250, 350, 200);
// 三次
ctx.moveTo(450, 250);
ctx.bezierCurveTo(530, 150, 650, 300, 700, 200);
蓝色是控制点
问题一:
那canvas是如何通过控制点来绘制出曲线的,或者如果不用这个,自己绘制曲线该如何操作呢:
这个是n阶贝塞尔曲线的方程:
我们重点看二(三)阶方程:
B(t)是曲线上的点,t在0~1之间取值, P0起始点,P2终点,P1控制点
t从0~1之间取值不断增大,B(t)不断取出曲线上的点,从P0移至P1
const bx = (1-t)*(1-t)*start.x + 2*t*(1-t)*control.x + t*t*end.x;
const by = (1-t)*(1-t)*start.y + 2*t*(1-t)*control.y + t*t*end.y;
问题二:
我咋知道控制点该怎么选,特别是起终点动态数据时(也就是说,我们使用时,往往只知道起点P0终点P1):
这个根据曲线斜率,可视化需求可能选取的方式不一致,不过大致原理相似
可以在起点和终点的垂直平分线
上选一点作为控制点
, 然后用一个参数来控制曲线的弯曲程度
// curveness 弯曲程度(0-1)
const cp = {x: ( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,y: ( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness
};
题外话:
关于cp点的求解:
线段中点:
const mid = [ ( start.x + end.x) / 2, ( start.y + end.y ) / 2 ];
根据起点和终点也可以得到一个向量v:
const v = [ end.x - start.x, end.y- start.y ];
将这个向量顺时针旋转90度,得到一个垂直于它的向量v2:
const v2 = [ v.y, -v.x ];
那么中间控制点的坐标为(向量v2乘curveness加上中间点坐标)const cp = { x: mid.x + v2.x curveness, y: mid.y + v2.y curveness} =
{ x:( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
y:( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness}
canvas学习笔记-贝塞尔曲线相关推荐
- html5贝塞尔曲线,Canvas学习:贝塞尔曲线
在绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线.不过值得庆幸的是,在Canvas中 ...
- canvas贝塞尔曲线爱心_canvas学习笔记-贝塞尔曲线
3.4 贝塞尔曲线 canvas提供了两个绘制贝塞尔曲线api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次贝塞尔曲线,(cpx, cpy)控制点 (x, y)终 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
- canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图 使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
- Canvas学习笔记之画线
Canvas学习笔记之画线 步骤 1.使用getElementById()获取canvas元素. 2.获取canvas的绘制环境getContext(). 3.进行绘制画笔的粗细和颜色定义,分别是li ...
- Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效 特效预览图 什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
- canvas贝塞尔曲线爱心_Canvas学习:贝塞尔曲线
在绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线.不过值得庆幸的是,在Canvas中 ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)...
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
最新文章
- (Java)常用排序
- 有关ubuntu16.04进行sudo apt-get update更新时出现:‘。。。N: 无法安全地用该源进行更新,所以默认禁用该源。。。’等问题解决方案
- Linux C编程--进程介绍5--system函数
- ZOJ 3822 Known Notation(2014牡丹江Regional K题)
- jsp动作之 getProperty
- 笔记本电脑排行_笔记本电脑性价比排行2020
- BASH Shell 简易进度条小函数
- python if写在return 后面_python中return如何写
- html td显示隐藏,显示/隐藏Html TR/TD
- python笔记之单行json数据组成的json文件按行解析:read_json()
- 来自DFRobot的中文语音识别模块
- 列表的增删改查和嵌套, 元组, range
- php将xml转为array,php将xml数据转化为数组(array)
- 华为交换机CSS集群
- 1.59TB《全球 12.5 米高程DEM for WeServer》发布
- matlab之产品大全
- matlab 轮廓系数,kmeans聚类理论篇K的选择(轮廓系数)
- Java NIO初试
- 清华大学生计算机系学生就业方向,这5所大学计算机专业全球顶尖,就业前景广阔,毕业就能拿高薪!...
- Python 实战 | 工欲善其事,必先利其器
热门文章
- XILINX ZYNQ7100 的上电顺序
- 电平转换与总线收发器详细介绍
- Spring的@Transactional事务注意事项
- Description Resource	Path	LocationType Java compiler level does not match the version of the instal
- UE4删除C++Classes下的类
- English Through Movie
- WEB标准 基础(一) 到底是什么?
- php对用户输入的非标准格式日期匹配
- 【Proteus仿真】220V转5V向单片机供电
- 适配器模式 Adapter Pattern