javascript - 这怎么不画圆 Angular 呢？

我正在尝试绘制一个带有圆角的矩形，到目前为止，只有顶部的角是圆形的，但是底部的两个角不是以某种方式？完整代码：https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

你们能发现错误吗？

        ctx.fillStyle = rectangle.color;
        ctx.moveTo((rectangle.x + 40 - 30) * Xf, (rectangle.y + 30 - 30) * Yf);
        ctx.lineTo((rectangle.x + 40 + 40) * Xf, (rectangle.y + 30 - 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 30 - 30) * Yf, (rectangle.x + 60 + 30) * Xf, (rectangle.y + 50 - 40) * Yf);
        ctx.lineTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 60 + 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 80 + 30) * Yf, (rectangle.x + 50 + 40) * Xf, (rectangle.y + 80 + 30) * Yf);
        ctx.lineTo((rectangle.x + 40 - 40) * Xf, (rectangle.y + 80 + 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 80 + 30) * Yf, (rectangle.x + 30 - 30) * Xf, (rectangle.y + 70 + 40) * Yf);
        ctx.lineTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 50 - 40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 30 - 30) * Yf, (rectangle.x + 50 - 40) * Xf, (rectangle.y + 30 - 30) * Yf);

最佳答案

我没有检查您的代码，但是这是一个绘制圆形矩形的通用函数：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var x=50;
var y=50;
var w=50;
var h=35;
var direction=1;
ctx.strokeStyle='gray';
ctx.fillStyle='orchid';
ctx.lineWidth=5;

animate();

function animate(){
  requestAnimationFrame(animate);

  ctx.clearRect(0,0,cw,ch);
  roundRect(x,y,w,h,10);
  ctx.stroke();
  ctx.fill();

  w+=direction;
  h+=direction;
  if(w<50 || w>100){
    direction*=-1;
    w+=direction;
    h+=direction;
  }

}

function roundRect(x,y,width,height,radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

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

关于javascript - 这怎么不画圆 Angular 呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27650148/