CodePen Embed - 绘制圆弧

<div class="wrapper">
  <canvas id="myCanvas" width="200" height="375"></canvas>
</div>

.wrapper {
  width: 800px;
  height: 375px;
  background: #FFEDE0;
  border: 1px dashed red;
  overflow: hidden;
}

const canvas = document.getElementById('myCanvas');

if (canvas.getContext) {
  const ctx =canvas.getContext('2d');
  ctx.arc(-1360, 187.5, 1500, 0, 360);
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = '10';
  ctx.stroke();
  ctx.fillStyle = "#FFD1AE"; 
  ctx.fill();
}

This Pen is owned by chenxin on CodePen.

See more by @awhitemouse on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.