使用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的新特性
Sep 05 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
vue登录注册实例详解
2019/09/14 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python简明入门教程
2015/08/04 Python
python批量提取word内信息
2015/08/09 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
车贷收入证明范本
2014/01/09 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
优质服务口号
2014/06/11 职场文书
介绍信如何写
2015/01/31 职场文书
红与黑读书笔记
2015/06/29 职场文书
交通事故责任认定书
2015/08/06 职场文书
早上好问候语大全
2015/11/10 职场文书