如何将 lineCap 属性 添加到 canvas？

Question

我正在尝试将 TimeCircles 插件的 canvas 上的 lineCap 属性 更改为 "round"。

$(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'); returns 一个包含所有 canvas 元素的数组。

Array 没有 getContext 方法。所以只需像下面这样添加 [0] select 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