绘制矩形_canvas-绘制矩形及弧形

好的，我可以为您解答。下面是绘制矩形和弧形的示例代码：

绘制矩形：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(50, 50, 100, 100);
</script>

上面的代码首先获取了 canvas 元素和 2D 上下文对象，然后设置了填充颜色为红色，最后调用 fillRect 方法绘制矩形。

fillRect 方法接受四个参数，分别是矩形左上角的 x 坐标、y 坐标、矩形的宽度和高度。

绘制弧形：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "#FF0000";
  ctx.fill();
</script>

上面的代码首先获取了 canvas 元素和 2D 上下文对象，然后调用 beginPath 方法开始新的路径，接着调用 arc 方法绘制弧形，最后设置填充颜色为红色并调用 fill 方法填充弧形。

arc 方法接受六个参数，分别是圆心的 x 坐标、y 坐标、半径、起始角度、终止角度和是否逆时针绘制。这里的起始角度和终止角度都是以弧度为单位的。