如何将 lineCap 属性添加到画布？

【问题标题】：How to add the lineCap property to the canvas?如何将 lineCap 属性添加到画布？
【发布时间】：2019-02-06 01:44:42
【问题描述】：

我正在尝试将 TimeCircles 插件的画布上的 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。

【问题讨论】：

标签： javascript jquery canvas html5-canvas countdown

【解决方案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

【讨论】：