Javascript context.closePath()方法没有出现

Javascript context.closePath() method does not appear

本文关键字：方法 context closePath Javascript      更新时间：2023-09-26

我已经尝试了很多在画布上绘制多个圆圈，但context.closePath()方法没有出现

我有这样的代码:

<script>
  var canvas = document.getElementById('mainCanvas-2');
  var context = canvas.getContext('2d');
  for(var i=0;i<canvas.width;i++){    
      var centerX = i+Math.random()*canvas.width / 2;
      var centerY = i+Math.random()*canvas.height / 2;
      var radius = 20;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.shadowColor = 'white';
      context.shadowBlur = 45;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.fillStyle = 'rgba(255, 255, 255, 0.5)';
      context.fill();
      context.strokeStyle = none;
      context.stroke();
      context.// here closePath() method does not appear
  }
</script>

请帮忙，谢谢。

把context.strokeStyle = none改成context.strokeStyle = 'none'就解决了，干杯!

演示如下:

  var canvas = document.getElementById('mainCanvas-2');
  var context = canvas.getContext('2d');
  for(var i=0;i<canvas.width;i++){    
      var centerX = i+Math.random()*canvas.width / 2;
      var centerY = i+Math.random()*canvas.height / 2;
      var radius = 20;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.shadowColor = 'white';
      context.shadowBlur = 45;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.fillStyle = 'rgba(255, 255, 255, 0.5)';
      context.fill();
      context.strokeStyle = 'none';
      context.stroke();
      context.closePath();
  }
<canvas id = "mainCanvas-2"></canvas>

相关文章：