绘制气泡
二次贝塞尔曲线canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。quadraticCurveTo(cpx，cpy，x，y) 贝塞尔控制点的 x 坐标，贝塞尔控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标。提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。（图片参考：HTML5 canvas quadraticCurveTo() 方法）
// 二次贝塞尔曲线绘制气泡var canvas=document.querySelector("canvas");canvas.width=800;canvas.height=600;var ctx=canvas.getContext("2d");draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="teal";//画个气泡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);ctx.quadraticCurveTo(125,25,75,25);ctx.stroke();}
绘制圆角矩形
var canvas=document.querySelector("canvas");canvas.width=800;canvas.height=600;var ctx=canvas.getContext("2d");draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="teal";ctx.beginPath();// 画个圆角矩形var x=100,y=100;var width=200,height=100;var radius=50;//圆角半径宽度ctx.beginPath();ctx.moveTo(x,y+radius);ctx.lineTo(x,y+height-radius);ctx.quadraticCurveTo(x,y+height,x+radius,y+height);ctx.lineTo(x+width-radius,y+height);ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);ctx.lineTo(x+width,y+radius);ctx.quadraticCurveTo(x+width,y,x+width-radius,y);ctx.lineTo(x+radius,y);ctx.quadraticCurveTo(x,y,x,y+radius);ctx.stroke();}
绘制立体桃心
三次贝塞尔曲线canvas bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 第一个贝塞尔控制点的 x 坐标，第一个贝塞尔控制点的 y 坐标，第二个贝塞尔控制点的 x 坐标， 第二个贝塞尔控制点的 y 坐标， 结束点的 x 坐标， 结束点的 y 坐标。提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。（图片参考：HTML5 canvas quadraticCurveTo() 方法）
var canvas=document.querySelector("canvas");canvas.width=800;canvas.height=600;var ctx=canvas.getContext("2d");draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="rgba(255,0,0,0)";// 加点阴影ctx.shadowOffsetX=3;ctx.shadowOffsetY=3;ctx.shadowBlur=7;//模糊度ctx.shadowColor="#999";// 再带点儿高光-径向渐变var highlight=ctx.createRadialGradient(105,58,5,30,30,180);highlight.addColorStop(0,'#ffffff');highlight.addColorStop(0.3,'tomato');ctx.fillStyle=highlight;//填充桃心颜色西红柿色ctx.beginPath();// 桃心ctx.moveTo(75,40);ctx.bezierCurveTo(75,37,70,25,50,25);ctx.bezierCurveTo(20,25,20,62.5,20,62.5);ctx.bezierCurveTo(20,80,40,102,75,120);ctx.bezierCurveTo(110,102,130,80,130,62.5);ctx.bezierCurveTo(130,62.5,130,25,100,25);ctx.bezierCurveTo(85,25,75,37,75,40);ctx.stroke();ctx.fill();//把颜色填充进去}
