Можете ли вы нарисовать изображения по дуге на холсте?

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>