Question

这是我的jsfiddle：jsfiddle

我无法弄清楚为什么这段代码导致了eclipse，请看下面我的代码，这是一个使用requestAnimationFrame的动画。

function circleGraph(radius) {
  return {
    type: 'circle',
    radius: radius,
    currentAngleAnimate: 0
  }
}
$(document).ready(function () {
  var canvas = document.getElementById('mycanvas');
  var context = canvas.getContext('2d')
  var width = canvas.width;
  var height = canvas.height;
  var circleObj = circleGraph(50);

  context.lineWidth = 1;
  context.strokeStyle = '#ad2323';
  context.fillStyle = '#ad2323';

  var draw = function () {
    context.clearRect(0, 0, width, height);
    context.beginPath();
    circleObj.currentAngleAnimate += Math.PI * 2 / 60;
    context.arc(width / 2, height / 2, circleObj.radius, -Math.PI / 2, circleObj.currentAngleAnimate, false);
    context.stroke();
    context.lineTo(width / 2, height / 2);
    context.fill();
    requestAnimationFrame(draw)
  }
  requestAnimationFrame(draw);
});

Answer 1

您的画布的default width and height为300 x 150像素。这些是canvas HTML元素的属性。然后，您通过CSS规则将画布拉伸到400 x 400像素 - 但是，CSS规则仅影响画布显示的方式，而不影响画布的分辨率。

解决方案：删除CSS并设置width和height属性：

<canvas id="mycanvas" width="400" height="400></canvas>

Answer 2

从CSS规则中删除height和width：

#mycanvas {
  border: thin solid green;
  position: relative;
}

现在，通过html属性添加width和height，它应该有效：

<canvas id="mycanvas" height="400" width="400"></canvas>

希望我的画布画一个圆圈，但会导致日食

2 个答案: