javascript - 如何将lineCap属性添加到 Canvas 上？

Question

我正在尝试将 TimeCircles Canvas 上的 lineCap 属性更改为“圆形”插件。

$(document ).ready(function() {
  var c = document.getElementsByTagName('canvas');
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.lineTo(100, 100);
  ctx.stroke();
});

缺少什么？完整代码在 CodePen .

Answer 1

var c = document.getElementsByTagName('canvas'); 返回包含所有 canvas 元素的数组。

Array 没有 getContext 方法。因此，只需添加 [0] 来选择 Canvas ，如下所示。

$(document ).ready(function() {
  var c = document.getElementsByTagName('canvas')[0];
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.lineTo(100, 100);
  ctx.stroke();
});

演示:CodePen