Canvas（HTML 5 元素）之绘制曲线图形

在HTML5中，我们可以使用Canvas元素来绘制图形。以下是一些使用Canvas绘制曲线图形的方法。

方法一：使用arc方法绘制圆弧

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(70, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

在上述代码中，我们使用了arc方法绘制了一个圆弧，你可以通过调整(70, 50)来改变圆弧的中心位置，调整40来改变圆弧的半径。

方法二：使用quadraticCurveTo方法绘制二次贝塞尔曲线

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
</script>

在上述代码中，我们使用了quadraticCurveTo方法绘制了一个二次贝塞尔曲线，你可以通过调整(20, 20)和(20, 100)来改变曲线的起点，调整(200, 20)来改变曲线的终点。

方法三：使用bezierCurveTo方法绘制三次贝塞尔曲线

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
</script>

在上述代码中，我们使用了bezierCurveTo方法绘制了一个三次贝塞尔曲线，你可以通过调整(20, 20)和(20, 100)来改变曲线的控制点1，调整(200, 100)和(200, 20)来改变曲线的控制点2。

以上就是在HTML5中使用Canvas元素绘制曲线图形的一些方法。