如何將lineCap屬性添加到畫布？

Question

我正在嘗試將TimeCaples插件的畫布上的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'); 返回包含所有canvas元素的數組。

Array沒有getContext方法。 因此，只需添加[0]即可選擇畫布，如下所示。

$(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