①
什么是贝塞尔曲线？
在数学的数值分析领域中，贝济埃曲线(英语：Bézier curve，亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝济埃曲线就称作贝济埃曲面，其中贝济埃三角是一种特殊的实例。
贝济埃曲线于1962年，由法国工程师皮埃尔·贝济埃(Pierre Bézier)所广泛发表，他运用贝济埃曲线来为汽车的主体进行设计。贝济埃曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发，以稳定数值的方法求出贝济埃曲线。
Photoshop的钢笔工具 GO！
贝塞尔曲线参考书 GO！
②
二次贝塞尔曲线
quadraticCurveTo(cpx,cpy,x,y)//cpx，cpy表示控制点的坐标,x，y表示终点坐标；
数学公式表示如下：
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪：
代码实例：
canvas直线
body, h1{margin:0;}
canvas{margin: 20px;}
二次贝塞尔曲线
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();
//绘制2次贝塞尔曲线
context.beginPath();
context.moveTo(20,170);
context.quadraticCurveTo(130,40,180,150);
context.strokeStyle = "red";
context.stroke();
}
代码效果：
三次贝塞尔曲线
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直线
body, h1{margin:0;}
canvas{margin: 20px; }
三次贝塞尔曲线
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();
//绘制3次贝塞尔曲线
context.beginPath();
context.moveTo(25,175);
context.bezierCurveTo(60,80,150,30,170,150);
context.strokeStyle = "red";
context.stroke();
}
代码效果图：
③
如上图所见，本文就是要实现上面那种效果。
由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。
④
二次贝塞尔曲线
canvas{border:1px solid black;width: ;height: ;
}
二次贝塞尔曲线
functiondraw(){varcanvas=document.getElementById('tutorial');//为 元素得到DOM对象
if(canvas.getContext){//一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。
varctx=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);
cxt.quadraticCurveTo(125,25,75,25);
ctx.stroke();
ctx.closePath();
}
}
