Question

你可以绘制弧线，你可以使用javascript在画布上绘制图像，但无论如何都可以做到这两点吗？也就是说，无论如何将图像绘制为弧而不是实线？

如果没有，是否有单独的方式来摆放图像？

我尝试沿着弧点对图像进行逐像素转换，但最终速度非常慢，看起来很差，因为我不能直接从javascript获取像素数据（或者你可以吗？我没有看到一种方法）所以对于每个像素，我需要计算沿弧的点，绘制当前图像像素，重新获取它，将图像数据绘制到计算点，然后在画布上清除该点。

Answer 1

您是否尝试过基于图像将strokeStyle设置为CanvasPattern？看起来你可以这样做（假设img是你想要绘制的HTMLImageElement而ctx是CanvasRenderingContext2D）：

var pattern = ctx.createPattern(img, "repeat");
ctx.strokeStyle = pattern;
ctx.beginPath();
ctx.arc(123, 408, 80, 0, 1.5*Math.PI, false);
ctx.stroke();

Answer 2

使用此html创建弧： -

<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = .8 * Math.PI;
  var endAngle = 2.2 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 30;

  // line color
  context.strokeStyle = 'blue';
  context.stroke();
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 8 * Math.PI;
  var endAngle =2.3 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 30;

  // line color
  context.strokeStyle = 'red';
  context.stroke();
</script>

你能在画布上画弧形图像吗？

2 个答案: