Question

我正在动态创建画布，然后绘制一个圆圈。但是，如图所示，圆圈显示为拉伸和偏移：

＆＃13;

var max = 50;
var canvas = document.createElement('canvas');
canvas.id = "mazecanvas";
var size = (document.documentElement.clientWidth / 100) * max;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
canvas.style.position = "absolute";
canvas.style.left = size / 2 + "px";
canvas.style.top = (document.documentElement.clientHeight / 2) - (size / 2) + "px";
document.body.appendChild(canvas);
var x, y;
var ctx = canvas.getContext('2d');

function circle() {
  ctx.globalCompositeOperation = "destination-in";
  ctx.beginPath();
  console.log(x, y);
  ctx.arc(x, y, 10, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  x = mousePos.x;
  y = mousePos.y;
}, false);

function draw() {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < max; i++) {
    for (var j = 0; j < max; j++) {
      ctx.fillStyle = 'rgb(' + Math.floor(255 - 5.5 * i) + ',' + Math.floor(255 - 5.5 * j) + ',0)';
      ctx.fillRect(j * (canvas.width / max), i * (canvas.height / max), canvas.width / max, canvas.height / max);
    }
  }
  circle();
  setTimeout(draw, 10);
}
draw();

＆＃13;

我不明白我做错了什么，我知道它是用画布创建的，因为当我删除它，并用静态替换它时，问题就消失了：

＆＃13;

var max = 50;
var canvas = document.getElementById('canvas');
var x, y;
var ctx = canvas.getContext('2d');

function circle() {
  ctx.globalCompositeOperation = "destination-in";
  ctx.beginPath();
  console.log(x, y);
  ctx.arc(x, y, 10, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  x = mousePos.x;
  y = mousePos.y;
}, false);

function draw() {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < max; i++) {
    for (var j = 0; j < max; j++) {
      ctx.fillStyle = 'rgb(' + Math.floor(255 - 5.5 * i) + ',' + Math.floor(255 - 5.5 * j) + ',0)';
      ctx.fillRect(j * (canvas.width / max), i * (canvas.height / max), canvas.width / max, canvas.height / max);
    }
  }
  circle();
  setTimeout(draw, 10);
}
draw();

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

Answer 1

设置画布的CSS样式会拉伸和挤压像素。这就是为什么你的圆圈变成椭圆形的原因。

相反，设置画布元素的宽度和高度。这实际上会将（或移除）像素添加（或移除）到画布以成为指定的大小。这将使你的圆圈保持圆形。 ; - ）

canvas.width=500;    // no need to add "px"
canvas.height=400;

使用arc在javascript中创建一个圆圈

1 个答案: