Html 画布项目未正确渲染

我已经定义了两个函数来渲染圆和三角形。非常直截了当的东西

function circle(offset, size){
  var color = $("#color option:selected").val();
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  radius = size * 1;

  context.beginPath();
  context.arc(offset, 2, radius, 0, 2 * Math.PI, false);
  context.fillStyle = color;
  context.fill();
 }

 function triangle(offset, size){
  var color = $("#color option:selected").val();
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var width = size * 6;
  var height = size * 5;
  var padding = 0;

  // Draw a path
  context.beginPath();
  context.moveTo(offset + width/2, padding);
  context.lineTo(offset + width, height + padding);
  context.lineTo(offset, height + padding);
  context.closePath();

  // Fill the path
  context.fillStyle = color;
  context.fill();
}

我已将画布添加到我的页面，其中包括：

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

由于某些原因，我可以看到圆和正方形a渲染不正确。请参阅附加的屏幕截图

---

我几乎可以保证这是因为您使用CSS宽度和高度设置画布的宽度和高度，而不是

html属性

您需要在画布标记中定义宽度/高度：

或在代码中：

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

而不是CSS。如果您这样做：

然后您将拥有一个300x150画布（默认大小），该画布被缩放/扭曲为500x500，这几乎可以肯定是您得到的

（我徒手写了上面的内容，所以可能会有打字错误，但你明白了）

是的。我把它改成：而且它工作得很好！谢谢