HTML5使用canvas绘画曲线

标签：

在HTML5的画布canvas要画出曲线有很多种方法，我只学会了一种，把自己的理解写出来大家分享下，如有错误请大神指教~！

我学会是用的方法是bezierCurveTo:

在bezierCurveTo中要填写6个值均为number

moveTo(x,y)————指定曲线的起始点
bezierCurveTo（x1,y1,x2,y2,x3,y3）
以下是我写的一个实例：

<canvas id="myCanvas" width="1000px" height="600px"></canvas>

var canvas = document.getElementById(‘myCanvas‘);
var cxt = canvas.getContext(‘2d‘);

cxt.beginPath()
cxt.lineWidth = 1;
cxt.moveTo(110,130)
cxt.bezierCurveTo(115,155,185,155,185,130)
cxt.stroke()
cxt.closePath()


效果如下：

为了明确x1，y2，x2，y2,x3，y3与x，y之间的关系，我添加了 以下代码

cxt.strokeStyle="red"
cxt.beginPath()
cxt.moveTo(110,130)
cxt.lineTo(115,155)
cxt.stroke()
cxt.closePath()
cxt.beginPath()
cxt.moveTo(115,155)
cxt.lineTo(185,155)
cxt.stroke()
cxt.closePath()
cxt.beginPath()
cxt.moveTo(185,155)
cxt.lineTo(185,130)
cxt.stroke()
cxt.closePath()


得到的结果是：

最后我得到的结果就是，x1,y1,x2,y2是控制曲线的弧度，x3，y3则是曲线的终点，

HTML5使用canvas绘画曲线

标签：

原文地址：http://www.cnblogs.com/yidian2ma/p/4715317.html