Question

我有一个小设置，您可以在其中键入矩形尺寸以绘制圆角矩形。但是，如果我将x和y坐标设置为0,0矩形就可以了。我把200,200的宽度和高度放在一起，并且可以准确地告诉它1/4的画布。

但是，如果放入1,1或其他坐标，矩形会变得太大。我再次投入200,200，期望只能被转移，但是它的画布非常大。发生了什么事？

JS

function myfunction(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var w = document.getElementById("boxwidth").value;
    var h = document.getElementById("boxheight").value;
    ctx.clearRect(0,0,400,400);
    //roundRect(ctx,0,0,w,h,1);
    roundRect(ctx,1,1,w,h,1);
}

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {

  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  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();
  if (stroke) {
    ctx.stroke();
  }
  if (fill) {
    ctx.fill();
  }        
}

JsFiddle

Answer 1

你的问题在这两行

var w = document.getElementById("boxwidth").value;
var h = document.getElementById("boxheight").value;

这一行返回 string ，但你需要 int ，所以你应该使用 parseInt ，如

var w = parseInt(document.getElementById("boxwidth").value, 10);
var h = parseInt(document.getElementById("boxheight").value, 10);

如果你没有将string转换为int，你的坐标计算是错误的：
例如w='100'; h='100';x=1;y=1;radius=1

ctx.lineTo(x + width - radius, y);

ctx.lineTo(1 + '100' - 1, 1);

所以得到：1 +＆＃39; 100＆＃39; - 1 =（1 +＆＃39; 100＆＃39;） - 1 =＆＃39; 1100＆＃39; - 1 = 1099

但你期望：1 + 100 - 1 =（1 + 100） - 1 = 101 - 1 = 100

如果您查看下面的代码段，您可以看到使用 parseInt 所有工作正确无误。

＆＃13;

    function myfunction() {

      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var w = parseInt(document.getElementById("boxwidth").value, 10);
      var h = parseInt(document.getElementById("boxheight").value, 10);
      ctx.clearRect(0, 0, 400, 400);
      //roundRect(ctx,0,0,w,h,1);
      roundRect(ctx, 50, 50, w, h, 1);
    }

    function roundRect(ctx, x, y, width, height, radius, fill, stroke) {

      if (typeof stroke == "undefined") {
        stroke = true;
      }
      if (typeof radius === "undefined") {
        radius = 5;
      }
      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();
      if (stroke) {
        ctx.stroke();
      }
      if (fill) {
        ctx.fill();
      }
    }

    myfunction();

＆＃13;

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
X:
<input type="number" value="200" id="boxwidth" onchange="myfunction()" />Y:
<input type="number" value="200" id="boxheight" onchange="myfunction()" />

＆＃13;

圆角矩形不在原点时超出比例

1 个答案: