HTML5 холст, изображение в качестве фона для арки или круга

Question

HTML5 холст, изображение в качестве фона для арки или круга

1

Привет, люди Stackoverflow, мой первый пост здесь.

У меня есть круг на холсте, а круг разделен на небо и часть земли, и это (аналоговые) часы выглядят, поэтому представьте, что руки часов были расширены до края круга, делая два "кусочка пирога". И руки двигаются. Я хотел бы иметь разные (фоновые) изображения для этих двух частей. Теперь у меня градиентное заполнение, но я хотел бы изменить градиент с соответствующими изображениями. Изображения должны заполнить всю их часть "кусочка пирога". Мой код:

  // ground portion of circle
  var lingrad=ctx.createLinearGradient(center.x, center.y,center.x,main_radius*2);
  lingrad.addColorStop(0,'green');
  lingrad.addColorStop(1,'brown');
  ctx.fillStyle=lingrad;
  ctx.beginPath();
  ctx.moveTo(center.x, center.y);
  ctx.lineTo(x2, y2);
  ctx.arc(center.x, center.y, radius,  d2r(z1 + 90), d2r(v1 + 90), false);
  ctx.moveTo(center.x, center.y);
  ctx.lineTo(x1, y1);
  ctx.closePath();
  ctx.fill();
  // sky portion of circle
  var lingrad1=ctx.createLinearGradient(center.x,0,center.x,center.y);
  lingrad1.addColorStop(0,'yellow');
  lingrad1.addColorStop(0.5,'yellow');
  lingrad1.addColorStop(1,'cyan');
  ctx.fillStyle=lingrad1;
  ctx.beginPath();
  ctx.moveTo(center.x, center.y);
  ctx.lineTo(x2, y2);
  ctx.arc(center.x, center.y, radius,  d2r(z1 + 90), d2r(v1 + 90), true);
  ctx.moveTo(center.x, center.y);
  ctx.lineTo(x1, y1);
  ctx.closePath();
  ctx.fill();

спасибо и извините за мой английский

Goran Mitić 12 сен. 2017, в 06:00

Источник

Теги:

javascript

html5

background

canvas

circle

1 ответ

Ещё вопросы

user1693593 · Accepted Answer · 2017-09-12T02-00-00.000Z

Вы можете использовать, например, clip() чтобы сделать это, сначала определив путь клипа, используя arc(), call clip(), затем нарисуйте два изображения в каждой половине.

Простой пример:

var img1 = new Image, img2 = new Image, count = 0, ctx = c.getContext("2d");
img1.onload = img2.onload = go;
img1.src = "//i.stack.imgur.com/EU6KB.jpg";
img2.src = "//i.stack.imgur.com/UmEA9.jpg";

function go() {
  if (++count < 2) return;  // just to make sure both images has loaded
  
  // save state as restoring is the only way to remove a clip-mask
  ctx.save();
  
  // define clip-mask using path operations
  ctx.arc(75, 75, 75, 0, 6.28);
  ctx.clip();
  
  // draw in top image
  ctx.drawImage(img1, 0, 0);

  // draw in bottom image
  ctx.drawImage(img2, 0, 75);
  
  // remove clip mask
  ctx.restore();
}

<canvas id=c></canvas>

Конечно, вы можете использовать положение, размер, а также аргументы обрезания drawImage() по вкусу.

Если я правильно прочитал вопрос, я думаю, что OP хочет что-то более гибкое, чем просто разделение в середине, что-то вроде jsfiddle.net/2j324gsn , которое также показывает, что clip действительно не подходит для непрямых форм (белые артефакты) и что gCO может предпочтительнее, за счет второго холста jsfiddle.net/2j324gsn/1
K3N, твой код точен, спасибо тебе большое. Я реализовал ваш код и работает хорошо ... но возникла еще одна проблема, у меня есть несколько значков, которые должны быть нарисованы поверх разделенного круга из оператора цикла, которых сейчас нет. Когда я ставлю alert () перед значком рисования, происходит забавная вещь, он рисует значки сверху, как и должно, но без alert () этого не происходит. Я пытался с загрузкой изображения и без, я пытался поместить переменные в массив, чтобы рисовать после цикла, все еще не идти ... Кайидо, ну, это выглядит интересно, я, конечно, немного возиться с этим, так как я все еще холст нуб. Спасибо за время и вклад.
@ GoranMitić Вы, вероятно, имеете дело с проблемой асинхронной загрузки. Пожалуйста, ознакомьтесь, например, с этим ответом о том, как предварительно загрузить много изображений.