HTML5 canvas基本绘图之绘制曲线

context.closePath(); }

// 获取canvas元素对应的DOM对象 var canvas = document.getElementById('mc');

// 获取在canvas上绘图的CanvasRenderingContext2D对象 var context = canvas.getContext('2d');

context.lineWidth = 3; context.strokeStyle = "#F9230B";

createRoundRect(context , 30 , 30 , 400 , 200 , 50); context.stroke();

效果如下：

•context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞曲线，参数含义如下：

曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

•context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线，参数如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。