首页 > web前端 > html/css/css3 > html5 canvas绘图之context.bezierCurveTo,context.quadraticCurveTo 绘制贝塞尔曲线实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之context.bezierCurveTo,context.quadraticCurveTo 绘制贝塞尔曲线实例

html5 canvas是强大的,它不仅可以绘制常规矩形、直线、圆等图形,还可以绘制贝塞尔曲线,这是非常有用并且有趣的,canvas绘制贝塞尔曲线主要用到两个方法,context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y),context.quadraticCurveTo(qcpx,qcpy,qx,qy)

绘制贝塞尔曲线(贝济埃、bezier) context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x:第一个控制点x坐标

cp1y:第一个控制点y坐标

cp2x:第二个控制点x坐标

cp2y:第二个控制点y坐标

x:终点x坐标

y:终点y坐标

绘制二次样条曲线context.quadraticCurveTo(qcpx,qcpy,qx,qy)

qcpx:二次样条曲线控制点x坐标

qcpy:二次样条曲线控制点y坐标

qx:二次样条曲线终点x坐标

qy:二次样条曲线终点y坐标。

示例

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
    var context = canvas.getContext("2d"); 
    context.moveTo(50, 50);
    context.bezierCurveTo(50, 50,150, 50, 150, 150);
    context.stroke();
    context.quadraticCurveTo(150, 250, 250, 250);
    context.stroke();
}
<script>

html5 canvas绘图标签 详细使用教程 - 第8张  | 码农小兵

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*