1

我正在尝试绘制一个带圆角的矩形，到目前为止只有顶角是圆角的，但底部的两个角不是以某种方式？完整代码：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);

上面的代码示例

4

1 回答 1

1

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

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>

于 2014-12-25T19:41:46.470 回答