canvas 贝萨尔曲线
二次贝塞尔曲线
定义:quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
说明:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath()和 moveTo()方法来定义开始点
语法:context.quadraticCurveTo(cpx,cpy,x,y);
参数:cpx 贝塞尔曲线控制点x坐标;cpy贝塞尔曲线控制点y坐标;
x 结束点x坐标;结束点y坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
实例代码:
var mycanvas = document.getElementById("mycanvas");if (mycanvas == null) {return false;}var context = mycanvas.getContext("2d");//创建二次贝塞尔曲线//绘制起始点,控制点,终点context.beginPath();context.moveTo(20, 170);context.lineTo(130, 40);context.lineTo(180, 150);context.stroke();//绘制二次贝塞尔曲线context.beginPath();context.moveTo(20, 170);context.quadraticCurveTo(130, 40, 180, 150);context.stroke();
效果图:
三次贝塞尔曲线
定义:bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
说明:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
语法:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数:cp1x 第一个贝塞尔控制点的 x 坐标;cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标;cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标;y 结束点的 y 坐标
数学公式表示如下:
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。
实现代码如下:
<span style="font-family:Comic Sans MS;font-size:12px;"> //创建三次贝塞尔曲线//创建控制点context.beginPath();context.moveTo(225, 175);context.lineTo(260, 80);context.lineTo(350, 30);context.lineTo(370, 150);context.stroke();//创建三次贝塞尔曲线context.beginPath();context.moveTo(225, 175);context.bezierCurveTo(260, 80, 350, 30, 370, 150);context.stroke();</span>
效果图如下:
转载自:http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html
canvas 贝萨尔曲线相关推荐
- 贝萨尔曲线实现Periscope心形点赞动画效果
先来个效果图 这个动画效果主要几个关注点是: 一.自定义的RelativeLayout中动态加载ImageView 二.刚开始的三个还没移动的动画效果anpha和scaleX,scaleY ,用Obj ...
- 绘制二次贝塞尔曲线(二次贝兹曲线)等距线:让 IE 支持 canvas接口 isPointInPath
一.背景: 在使用 canvas 做知识图谱的时,实体关系使用线宽为 1px 的线绘制, 用户必须点在线上, 才能正常拾取到点击的边. 边关系,有些是直线边,有些是二次贝塞尔曲线.产品提议,线不能加粗 ...
- bezier.CSS_SVG_canvas画_贝兹曲线
ZC:(1).SVG可以绘制 贝兹曲线:(2).canvas能绘制 贝兹曲线:(3).现在(20180202)查资料发现,css 貌似不能绘制 贝兹曲线,css使用贝兹曲线 主要是用于控制动画的速度, ...
- html贝塞尔曲线在线,使用canvas绘制贝塞尔曲线
1.二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标,x,y表示终点坐标: 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1.P ...
- html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
- [zz]用三阶贝塞尔曲线(贝兹曲线)拟合劣圆弧的公式(附伪代码)
转自:用三阶贝塞尔曲线(贝兹曲线)拟合劣圆弧的公式(附伪代码) 三阶贝塞尔曲线有四个控制点A.B.C.D, 若要用三阶贝塞尔曲线拟合劣圆弧,自然的要求是: 1)A位于圆弧的起点,D位于圆弧的终点: 2 ...
- html5添加随机率,HTML5 canvas 绘制随机曲线 并实现放大功能
正在开发一个无线监控系统,要显示频率波形图,所以最近一段时间再研究HTML5 canvas 标签,本例实现了根基传经来的数据绘制曲线,并对整个图实行局部放大功能. js代码(canvas_06.js) ...
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
啥也不说,先上示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Canvas绘制圆滑曲线
canvas 绘制曲线是一个比较容易实现的逻辑,但是对于签名,或者手写板,大屏会议机等设备原生的Canvas.drawPath(); 要求线条曲率完美,直接使用drawPath显然不能满足需求,这方面 ...
最新文章
- [Java 安全]加密算法
- SAP CRM Fiori 应用的 offline 离线支持开发笔记
- MVC View显示详解(RenderBody,RenderPage,RenderSection,Partial)
- Git 教程学习--第三篇
- [hdu2222]Keywords Search(AC自动机)
- python多进程map比apply快_python 多进程读写 map
- MySQL学习之——锁(行锁、表锁、页锁、乐观锁、悲观锁等)
- 计算机机房空调设计规范,计算机机房空调设计规范
- ubuntu oracle 工具,ubuntu上安装Oracle InstantClient
- 使用 Charles 对 Android 设备进行 Https 抓包
- [python3]读取docx每个段落下的table数据
- C++基础:模板,函数模板和类模板
- 什么是Rest风格的Api?
- 北京交通大学计算机仿真大作业直流调速系统仿真,北京交通大学电气工程学院计算机仿真大作业.docx...
- 游戏建模行业就国内发展的前景,以及行业变化是如何的?
- PHP实现页面静态化
- div 页面框架布局
- linux得到两个文件的交集、并集
- 防止matplotlib画完图后自动关闭
- 如何用Python求众数
热门文章
- ffmpeg给视频添加时间水印
- 计算机网络————IP地址分类以及网络地址的计算
- java 后台判断浏览器类型,IE11下载乱码解决方案
- 计算机文件查看隐藏文件,电脑隐藏文件怎么显示啊,明明点了显示所有文件,按了确定后,又恢复了原来样子,为什么啊...
- snipaste滚动截图方法_老板让你把整个网页截图形成长图,具体怎么做?
- 【Leetcode】1564. Put Boxes Into the Warehouse I
- java api gateway_微服务中的 API 网关(API Gateway)
- 简约至上的产品设计(2)愿景是简单的指南
- python进阶day4
- idea导入子工程module