canvas贝塞尔曲线爱心_HTML5 Canvas 绘制贝塞尔曲线 Bezier and quadratic curves

贝塞尔曲线：它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。

方法：

quadraticCurveTo(cp1x,cp1y,x,y)

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

参数x和y是终点坐标，cp1x和cp1y是第一个控制点的坐标，cp2x和cp2y是第二个的。

用贝塞尔曲线绘制聊天气泡

说明

用贝塞尔曲线绘制聊天气泡

代码

functiondraw(){

varcanvas=document.getElementById("cv");

if(canvas.getContext){

varctx=canvas.getContext("2d");

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

}

}

用贝塞尔曲线绘制聊天气泡