canvas 曲线绘制

Canvas 可以通过绘制曲线来创建各种形状和图案。要绘制曲线，可以使用 Canvas API 中的 quadraticCurveTo() 或 bezierCurveTo() 方法。

quadraticCurveTo() 方法绘制二次贝塞尔曲线，需要三个参数：控制点的x和y坐标以及结束点的x和y坐标。

bezierCurveTo() 方法绘制三次贝塞尔曲线，需要六个参数：前两个参数表示第一个控制点的x和y坐标，第三和第四个参数表示第二个控制点的x和y坐标，最后两个参数表示结束点的x和y坐标。

下面是一个简单的例子，绘制一个带有曲线的矩形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 150);

// 绘制曲线
ctx.beginPath();
ctx.moveTo(75, 0);
ctx.quadraticCurveTo(150, 0, 150, 75);
ctx.quadraticCurveTo(150, 150, 75, 150);
ctx.quadraticCurveTo(0, 150, 0, 75);
ctx.quadraticCurveTo(0, 0, 75, 0);
ctx.stroke();

这个例子绘制了一个红色的矩形，并在矩形内部绘制了一个带有曲线的边框。

相关问题

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 ]

canvas 绘制曲线

可以使用以下代码来绘制曲线：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(100, 100, 150, 50);
ctx.stroke();

这段代码利用 canvas 的 API 绘制一条二次贝塞尔曲线，起点是 (50, 50)，控制点是 (100, 100)，终点是 (150, 50)。其中，`quadraticCurveTo` 方法接受三个参数，分别是控制点的横纵坐标和终点的横纵坐标。