想要使用canvas html5绘制矩形，但这个矩形弯曲的拱形形状如图

Question

想要使用画布html5绘制矩形，但是这个矩形像图片中那样弯曲拱形

Answer 1

使用quadraticCurveTo（x，y，Bx，By）;

 var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(200, 200);
  context.quadraticCurveTo(400, 300, 600, 200);
  context.quadraticCurveTo(500, 300, 600, 400);
  context.quadraticCurveTo(400, 300, 200, 400);
  context.quadraticCurveTo(300, 300, 200, 200);
  context.closePath();
  // line color
  context.lineWidth = 10;
  context.strokeStyle = 'black';
  context.stroke();
  context.fillStyle = 'green';
  context.fill();

http://codepen.io/hamed19/pen/QyXbNp

Answer 2

您可以创建一个包含二次曲线的路径，除了左边和右边的所有内容。右边（直线）：

示例代码和演示：

使用样式来模仿问题的图像

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

drawArchedRect(10,10,330,192,10,25,'lightgray','gray');

function drawArchedRect(x,y,w,h,offset,dipy,strokecolor,shadow){

  ctx.translate(x,y);

  ctx.beginPath();
  ctx.moveTo(offset,0);
  ctx.quadraticCurveTo(offset+w/2,dipy ,w-offset,0);
  ctx.quadraticCurveTo(w,0, w,offset);
  ctx.lineTo(w,h-offset);
  ctx.quadraticCurveTo(w,h,  w-offset,h);
  ctx.quadraticCurveTo(offset+w/2,h-dipy ,offset,h);
  ctx.quadraticCurveTo(0,h, 0,h-offset);
  ctx.lineTo(0,offset);
  ctx.quadraticCurveTo(0,0, offset,0);

  ctx.save();

  if(shadow){
    ctx.clip();
    ctx.shadowColor=shadow;
    ctx.shadowBlur=5;
  }
  ctx.strokeStyle=strokecolor;
  ctx.lineWidth=1.5;
  ctx.stroke();

  ctx.restore();
}

<canvas id="canvas" width=350 height=300></canvas>