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

}

}

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