javascript - html5 Canvas ，图像作为拱形或圆形的背景

Question

你好 Stackoverflow 的人，我在这里的第一篇文章。

我在 Canvas 上有一个圆圈，圆圈分为天空和地面部分，它看起来像(模拟)时钟，所以想象一下时钟的指针延伸到圆圈的边缘，形成两个“饼图” .手在动。我想为这两个部分提供不同的(背景)图像。现在我有渐变填充，但我想用适当的图像改变渐变。图像必须填满“饼图切片”的整个部分。到目前为止我的代码:

  // 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();

谢谢你，对不起我的英语

Answer 1

例如，您可以使用 clip() 来执行此操作，方法是首先使用 arc() 定义剪辑路径，调用 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() 的位置、大小和裁剪参数品尝。