文档章节

Canvas贝塞尔曲线

潘-C
 潘-C
发布于 2017/06/27 10:12
字数 323
阅读 57
收藏 1

在canvas中有一个非常有用的路劲类型: 贝塞尔曲线。二次及三次贝塞尔曲线都十分有用,一般用来绘制复杂有规律的图形。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y结束点。

quadraticCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线,cp1x,cp1y控制点一,cp2x,cp2y为控制点二,x,y为结束点。

图中分别描述了二次贝塞尔曲线和三次贝塞尔曲线的实例,红色点表示控制点,蓝色点表示结束点,二次贝塞尔曲线有一个控制点和一个结束点,三次贝塞尔曲线有两个控制点和一个结束点。

下面画个对话框(二次贝赛尔曲线)

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();
  }
}

效果图:

再来个稍微复杂点的(三次贝赛尔曲线)

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}

效果图:

感觉这东西就是计算的时候比较费劲,但确实能画出很多复杂的东西,一点一点调整。

© 著作权归作者所有

上一篇: NPM钩子
下一篇: ES6 Class基本语法
潘-C
粉丝 5
博文 19
码字总数 9205
作品 0
海淀
程序员
私信 提问
bezierMaker.js——N阶贝塞尔曲线生成器

写在最前 由于原生的Canvas最高只支持到三阶贝塞尔曲线,那么我想添加多个控制点怎么办呢?(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时,关于贝塞尔控制点的位置我们很难非常直观...

Annn
2018/10/29
0
0
用canvas绘制一个曲线动画——深入理解贝塞尔曲线

摘要:在前端开发中,贝赛尔曲线无处不在:这篇文章我准备从实现一个非常简单的曲线动画效果入手,帮助大家彻底地弄懂什么是贝塞尔曲线,以及它有哪些特性,文章中有一点点数学公式,但是都非...

hujiulong/blog
2018/01/04
0
0
canvas进阶——如何画出平滑的曲线?

背景概要 相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求:实现一个可以书写的画板小工具。 嗯,相信这对canvas使用较熟的童鞋来说仅仅只是几十行代码就可以...

我的蓝猫被削了
2018/10/15
0
0
Qt Quick 之 PathView 详解

PathView ,顾名思义,沿着特定的路径显示 Model 内的数据。 Model 可以是 QML 内建的 ListModel 、 XmlListModel ,也可以是在 C++ 中实现的 QAbstractListModel 的派生类。 PathView 恐怕是...

foruok
2014/07/23
0
0
动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型: ease in 先慢后快...

Jeff.Zhong
01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

etcd 在超大规模数据场景下的性能优化

作者 | 阿里云智能事业部高级开发工程师 陈星宇(宇慕) 概述 etcd是一个开源的分布式的kv存储系统, 最近刚被cncf列为沙箱孵化项目。etcd的应用场景很广,很多地方都用到了它,例如kubernete...

zhaowei121
18分钟前
2
0
MYSQL主从介绍

MYSQL软件概念 MYSQL是一款数据库,关系型数据库系统; MYSQL主要用于存放:员工姓名、身份证ID、商城订单及金额、销售业绩及报告,学生考试成绩、网站帖子、论坛用户信息等; MYSQL在WEB架构...

寰宇01
21分钟前
1
0
org.apache.cxf.interceptor.Fault: null

出现这个异常的原因:json字符串为null 所以会出现这个错误。需要加上条件判断。 如果不是这个原因,可以参考: https://blog.csdn.net/rshw123456/article/details/8001677...

嘿嘿嘿IT
21分钟前
1
0
gradle控制so库的输出位置

gradle.taskGraph.beforeTask { task -> String abi = "lib/armeabi/" def TASK_NAME = "transformNativeLibsWithStripDebugSymbolFor" String buildType = "debug" //S......

Gemini-Lin
22分钟前
2
0
AndroidL 开机展示Keyguard锁屏机制初探

目录 目录 锁屏时序图 开机启动到PhoneWindowManager的systemReady方法 锁屏加载流程 PhoneWindowManager KeyguardServiceDelegate KeyguardServiceWrapper KeyguardService KeyguardViewMe......

天王盖地虎626
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部