像饼图一样裁剪图像

Question

我想像饼图一样在另一张图片上裁剪图片以创建加载动画。我正在考虑使用 raphaeljs，但找不到任何有关以饼图样式裁剪图像的信息。

示例图片如下：

起始状态：

结束状态：

它应该是什么样子：

Answer 1

您需要一个算法：

将图像 A 绘制到 canvas 1
清除 canvas 2
在canvas2上画一个局部的圆圈，作为目前spinner的状态，用白色填充
Blit image B onto canvas 2，使用乘法混合模式
Blit canvas 2 到 canvas 1，使用标准（替换）混合

Canvas 2 应该包含第二张图片，由您要使用的部分遮盖。将其叠加到 canvas 1 上，只要您正确处理透明度，应该会产生您想要的效果。

假设您的目标浏览器支持 SVG，您也可以使用两个带有图像背景的 SVG 圆圈并简单地执行此操作。

Answer 2

只需在图像顶部绘制一个半透明的填充圆弧（根据您的喜好调整 alpha 值）：

var ctx = document.querySelector("canvas").getContext("2d"),
    img = new Image;

img.onload = draw;
img.src = "http://i.imgur.com/hQ5Pljv.png";

function draw(){

  var cx = 157, cy = 159, r = 150,
      pst = 0,
      ang = Math.PI * 2 * (pst/100),
      dlt = 2;
  
  // animate the following part
  (function loop() {
    ctx.drawImage(img, 0, 0);
  
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, r, 0, ang);
    ctx.fillStyle = "rgba(0,0,0,0.33)";  // adjust alpha here
    ctx.fill();

    pst += dlt;
    if (pst <= 0 || pst >= 100) dlt = -dlt;
    ang = Math.PI * 2 * (pst/100);

    requestAnimationFrame(loop)
  })()
}

<canvas width=320 height=320></canvas>

方法二-合成

使用两个步骤来剪辑上面相同的弧以使用图像代替：

画圆弧，这就是合成数据
更换比赛。模式为 source-atop - 下一个绘图替换绘制的圆弧
在

次要

更换比赛。模式为 destination-atop - 下一幅图将填充所有非像素
在

演示：

var ctx = document.querySelector("canvas").getContext("2d"),
    img1 = new Image, img2 = new Image, cnt=2;

img1.onload = img2.onload = loader;
img1.src = "http://i.imgur.com/hQ5Pljv.png";
img2.src = "http://i.imgur.com/k70j3qp.jpg";

function loader(){if (!--cnt) draw()};                      
function draw(){
  var cx = 157, cy = 159, r = 150,
      pst = 0, ang = Math.PI * 2 * (pst/100), dlt = 2;
  
  // animate the following part
  (function loop() {
    ctx.clearRect(0, 0, 320, 320);   // clear canvas, or set last comp mode to "copy"
    
    // first arc
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, r, 0, ang);
    ctx.fill();       // this will be comp. basis for the next steps

    // comp mode secondary image
    ctx.globalCompositeOperation = "source-atop";      // replaces filled arc
    ctx.drawImage(img2, 0, 0);

    // comp mode main image
    ctx.globalCompositeOperation = "destination-atop"; // fills all non-pixels
    ctx.drawImage(img1, 0, 0);

    pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; ang = Math.PI * 2 * (pst/100);
    ctx.globalCompositeOperation = "source-over";  // reset comp. mode
    requestAnimationFrame(loop)
  })()
}

<canvas width=320 height=320></canvas>

像饼图一样裁剪图像

Crop image like pie chart

javascript

canvas

raphael

html5-canvas

方法二-合成

演示：