html5学习：使用canvas画曲线(2)_H5之家 - 中国HTML5教程资源分享第一站

html5-canvas-bezier-curves-diagram3].png

它完整的函数是：

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

当然，它的起始点也需要上下文使用moveTo函数指定。

简单的示例：

<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } </style> </head> <body> <canvas id="myCanvas" width="600" height="300"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var pi=Math.PI; context.beginPath(); context.moveTo(10, 290); context.bezierCurveTo(50,-200,150,200,500,290); context.lineWidth = 10; context.strokeStyle = '#444'; context.lineCap='round'; context.stroke(); </script> </body> </html>

当然，贝塞尔曲线和二次曲线一样，也可以使用ctrokeStyle/lineWidth/lineCap。

-----------------------------------------------------
转载请注明来源此处
原地址：

-----网友评论----

1楼：太空守望者发表于 2014-08-15 00:26:16

注意休息！

2楼：liuzuoquan 发表于 2014-08-15 00:27:24

好的~你也是啊！哈哈

-----发表评论----