画布项目无法正确呈现

Question

我已经定义了两个函数来渲染一个圆和一个三角形.很直接的东西.

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>

出于某种原因,我可以看到圆形和正方形无法正确渲染.请参阅随附的屏幕截图

Answer 1

我几乎可以保证这是因为你使用CSS宽度和高度而不是<canvas>html属性来设置画布的宽度和高度.

您需要在canvas标记中定义宽度/高度:<canvas width="500" height="500">

或在代码中:

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

而不是CSS.如果你这样做:

<canvas style="width: 500px; height: 500px;">

然后你会有一个300x150的画布(默认大小)缩放/扭曲为500x500,这几乎肯定是你得到的.

(我写了上面的写意,所以可能会有一个错字,但你明白了)