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

时间:2018-08-31 04:30:25

标签: javascript jquery canvas html5-canvas countdown

我正在尝试将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中完成代码。

1 个答案:

答案 0 :(得分: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