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

Question

我不明白为什么我的代码不工作，画的圆圈不在画布的中心，它比它应该的要大得多，而且与像素有关。任何建议，帮助非常感激。

// 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();

Answer 1

你是不是把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属性。看