使用canvas绘制贝塞尔曲线
2014-12-17 15:48
411 查看
1、二次贝塞尔曲线
quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标,x,y表示终点坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
代码实例:
代码效果:
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方向的“长度有多长”。
代码实例:
代码效果图:
是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西,上瘾了。
quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标,x,y表示终点坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
代码实例:
<!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>
代码效果:
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方向的“长度有多长”。
代码实例:
<!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>
代码效果图:
是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西,上瘾了。
相关文章推荐
- 使用HTML5的Canvas绘制曲线的简单方法
- HTML5开发实例-使用canvas绘制曲线
- 使用canvas 绘制一个有限度的斐波那契数列的曲线
- 绘制Canvas的使用二
- 使用FusionCharts 根据数据库里的数据绘制曲线
- html5 canvas之绘制曲线
- Android上使用Canvas绘制文字
- 使用GDI绘制简单曲线
- Android 图标上面添加提醒(一)使用Canvas绘制
- C# 使用“抗锯齿”功能绘制直线和曲线
- 数字雨(Javascript使用canvas绘制Matrix,效果很赞哦)
- AS使用Graphics绘制曲线的一个小问题
- 使用 HTML5 canvas 绘制的图形
- HTML5学习笔记之使用canvas绘制矩形
- 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法
- 使用AChartEngine绘制双Y轴的柱形--曲线图
- android中Canvas使用drawBitmap绘制图片
- canvas绘制曲线函数arc参数
- 使用JFreeChart在网页上绘制平滑曲线
- 如何使用MATLAB绘制平滑曲线