使用canvas绘制贝塞尔曲线


Posted in HTML / CSS onDecember 17, 2014

1、二次贝塞尔曲线

quadraticCurveTo(cpx,cpy,x,y)

//cpx,cpy表示控制点的坐标,x,y表示终点坐标;

数学公式表示如下:

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:

使用canvas绘制贝塞尔曲线

使用canvas绘制贝塞尔曲线

代码实例:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直线</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body, h1{margin:0;}
canvas{margin: 20px;}
</style>
</head>
<body onload="draw()">
<h1>二次贝塞尔曲线</h1>
<canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘制起始点、控制点、终点
context.beginPath();
context.moveTo(20,170);
context.lineTo(130,40);
context.lineTo(180,150);
context.stroke(); </p> <p> //绘制2次贝塞尔曲线
context.beginPath();
context.moveTo(20,170);
context.quadraticCurveTo(130,40,180,150);
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>

代码效果:

使用canvas绘制贝塞尔曲线

2、三次贝塞尔曲线

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

//cp1x,cp1y表示第一个控制点的坐标,cp2x,cp2y表示第二个控制点的坐标,x,y表示终点的坐标;

数学公式表示如下:

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。

使用canvas绘制贝塞尔曲线

使用canvas绘制贝塞尔曲线

代码实例:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直线</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, h1{margin:0;}
canvas{margin: 20px; }
</style>
</head>
<body onload="draw()">
<h1>三次贝塞尔曲线</h1>
<canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘制起始点、控制点、终点
context.beginPath();
context.moveTo(25,175);
context.lineTo(60,80);
context.lineTo(150,30);
context.lineTo(170,150);
context.stroke(); </p> <p> //绘制3次贝塞尔曲线
context.beginPath();
context.moveTo(25,175);
context.bezierCurveTo(60,80,150,30,170,150);
context.strokeStyle = "red";
context.stroke();
}
</script>
</body>
</html>

代码效果图:

使用canvas绘制贝塞尔曲线

是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西,上瘾了。

HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 #HTML / CSS
24个canvas基础知识小结
Dec 17 #HTML / CSS
html5使用canvas绘制文字特效
Dec 15 #HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 #HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
html5使用canvas画三角形
Dec 15 #HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 #HTML / CSS
You might like
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
简单谈谈json跨域
2016/03/13 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python中map的基本用法示例
2018/09/10 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
解除财产保全担保书
2014/05/20 职场文书
消防安全宣传口号
2014/06/10 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
毕业论文致谢词
2015/05/14 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python