Canvas 绘制曲线

Canvas绘制曲线可以使用曲线和弧线两种方式。曲线是由一系列的点连接而成，每个点都有相同的曲率。而弧线则是圆周上的一部分。在Canvas中，可以使用moveTo(x, y)和lineTo(x, y)方法来绘制曲线。例如，可以使用以下代码在Canvas中绘制一个曲线图形：

<canvas width="600" height="300" id="cvs"></canvas>
<script>
  var oCanvas = document.getElementById('cvs');
  var ctx = oCanvas.getContext('2d');
  ctx.moveTo(10, 100);
  for(var i = 10; i < 600; i++){
    var x = i;
    var y = 10 * Math.cos(x/10) + 100;
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = "orangered";
  ctx.stroke();
</script>

这段代码使用了Math.cos()函数来计算每个点的y坐标，然后使用lineTo()方法将点连接起来，最后使用stroke()方法绘制出曲线。\[1\]

除了使用曲线，还可以使用贝塞尔曲线来绘制曲线。贝塞尔曲线是根据四个位置任意的点坐标绘制出的一条光滑曲线。在Canvas中，可以使用bezierCurveTo(dx1, dy1, dx2, dy2, x, y)方法来绘制贝塞尔曲线。例如，可以使用以下代码在Canvas中绘制一个贝塞尔曲线：

<canvas width="600" height="300" id="cvs"></canvas>
<script>
  var oCanvas = document.getElementById('cvs');
  var ctx = oCanvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(50, 150);
  ctx.bezierCurveTo(100, 50, 200, 200, 250, 100);
  ctx.strokeStyle = "#FF0000";
  ctx.lineWidth = 5;
  ctx.stroke();
</script>

这段代码使用了bezierCurveTo()方法来绘制贝塞尔曲线，其中的参数分别表示控制点和终点的坐标。\[2\]

综上所述，Canvas可以使用曲线和贝塞尔曲线两种方式来绘制曲线图形。
#### 引用[.reference_title]
- *1* *3* [canvas基础入门系列教程(5)-绘制曲线图形](https://blog.csdn.net/keledon/article/details/87114689)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [详述Canvas(四)/绘制曲线](https://blog.csdn.net/rentian1/article/details/78681655)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]