Javascript 在浏览器窗口的中心渲染画布圆

我不明白为什么我的代码不起作用， 圆圈正在绘制，但不在画布的中心， 它比应该的要大得多，皮克斯很高兴。 如有任何建议，非常感谢您的帮助

// safe code:
(function(global, library){

var spaceTime = function(container){

// if container is global object
if (typeof container === "object"){
  var cHeight = container.innerHeight;
  var cWidth = container.innerWidth;
}
// if container is a div box
else {
  var cHeight = container.style.height;
  var cWidth = container.style.width;
}
console.log("container is an "+typeof container);

// return unique instance each time sT is called
return new spaceTime.init(cHeight, cWidth);


}

// function constructor
spaceTime.init = function(height, width) {
  this.height = height;
  this.width = width;
}



// methods: override the default prototype property
spaceTime.prototype = {

checkDimensions: function() {
  console.log(this.height + this.width);
  console.log(this);
  return this;
},

sequence: function(divide) {

  // var getSize = this.getCentre(divide);
  var grow = this.expand(200);
  var box = this.setCanvas();
  // box.classList.add("box");
  document.body.appendChild(box);

  // nest this in a requestAnimationFrame and pass
  // the grow function to warp radius
  this.drawCircle(box, grow);

  return this;

},

// expands each unique instance.
expand: function(i) {
  i += 1;
  return i;
},

getCentre: function(axis) {
  // width axis
  if(axis === "x"){
    console.log(this.height / 2);
    return this.height / 2;

  }
  // height axis
  else if(axis === "y"){
    return this.width / 2;
  }
  // if undefined or the string doesn't match
  else{
    throw "please input an x or y axis to be proccessed";
  }
},

// canvas context object and it's api methods
drawCircle: function(c, radius) {

   var ctx = c.getContext("2d");

   var x = this.getCentre("x");
   var y = this.getCentre("y");
   console.log(x);
   console.log(y);

   // define the arc path
   ctx.beginPath();
   ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
   ctx.fillStyle = 'green';
   ctx.fill();

   // stroke it
   ctx.StrokeStyle = "#aaa";
   ctx.stroke();

   console.log(ctx);
   console.log(radius);

},

// set up the canvas element
setCanvas: function() {
 var c = document.createElement("canvas");
 c.style.height = this.height + "px";
 c.style.width = this.width + "px";

 console.log("new canvas element created");

 return c;
}

}



// override the prototype object with our own one.
spaceTime.init.prototype = spaceTime.prototype;


// reference and expose library to be invoked.
global.sT = spaceTime;


}(window));








// instance 1 of wormhole library
var inst1 = sT(this);

// method chaining
inst1.checkDimensions().sequence();

---

你不是把x轴和y轴搞混了吗

getCentre: function(axis) {
  if(axis === "x"){
    return this.height / 2;

  }
  else if(axis === "y"){
    return this.width / 2;
  }
...
},

drawCircle: function(c, radius) {

    ...

   var x = this.getCentre("x"); // will return this.height / 2
   var y = this.getCentre("y"); // will return this.width / 2
   console.log(x);
   console.log(y);

   ...
}

---

呃，可能在定义画布大小时不应该使用

style

属性。看

你不是把x轴和y轴搞混了吗

getCentre: function(axis) {
  if(axis === "x"){
    return this.height / 2;

  }
  else if(axis === "y"){
    return this.width / 2;
  }
...
},

drawCircle: function(c, radius) {

    ...

   var x = this.getCentre("x"); // will return this.height / 2
   var y = this.getCentre("y"); // will return this.width / 2
   console.log(x);
   console.log(y);

   ...
}

---

呃，可能在定义画布大小时不应该使用

style

属性。看

我做了，好地方。不管出于什么原因，它仍然不起作用。谢谢ankhzet。我想就是这样，我做到了，好地方。不管出于什么原因，它仍然不起作用。谢谢ankhzet。仅此而已。添加一些最小的可复制示例（例如，on），以便社区可以测试它。不要使用CSS调整画布的大小。使用CSS将“拉伸并挤压”将现有的画布像素调整到新的大小。这就是为什么您的圆被扭曲的原因。相反，直接调整画布元素的大小：

c.height=this.height

和

c.width=this.width

。希望这能让您更容易测试，这是我在js代码末尾针对对象调用的序列方法。mark，这完全有道理。谢谢两个。很抱歉我忽略了css。添加一些最小的可复制示例（例如，on，以便社区可以测试）。不要使用css调整画布的大小。使用css将“拉伸和挤压”将现有的画布像素调整到新的大小。这就是为什么您的圆被扭曲的原因。相反，直接调整画布元素的大小：

c.height=this.height

和

c.width=this.width

。希望这能让您更容易测试，这是我在js代码末尾针对对象调用的序列方法。mark，这完全有道理。谢谢。很抱歉我忽略了css。