像饼图一样裁剪图像
Crop image like pie chart
我想像饼图一样在另一张图片上裁剪图片以创建加载动画。我正在考虑使用 raphaeljs,但找不到任何有关以饼图样式裁剪图像的信息。
示例图片如下:
起始状态:
结束状态:
它应该是什么样子:
您需要一个算法:
- 将图像 A 绘制到 canvas 1
- 清除 canvas 2
- 在canvas2上画一个局部的圆圈,作为目前spinner的状态,用白色填充
- Blit image B onto canvas 2,使用乘法混合模式
- Blit canvas 2 到 canvas 1,使用标准(替换)混合
Canvas 2 应该包含第二张图片,由您要使用的部分遮盖。将其叠加到 canvas 1 上,只要您正确处理透明度,应该会产生您想要的效果。
假设您的目标浏览器支持 SVG,您也可以使用两个带有图像背景的 SVG 圆圈并简单地执行此操作。
只需在图像顶部绘制一个半透明的填充圆弧(根据您的喜好调整 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>
我想像饼图一样在另一张图片上裁剪图片以创建加载动画。我正在考虑使用 raphaeljs,但找不到任何有关以饼图样式裁剪图像的信息。
示例图片如下:
起始状态:
结束状态:
它应该是什么样子:
您需要一个算法:
- 将图像 A 绘制到 canvas 1
- 清除 canvas 2
- 在canvas2上画一个局部的圆圈,作为目前spinner的状态,用白色填充
- Blit image B onto canvas 2,使用乘法混合模式
- Blit canvas 2 到 canvas 1,使用标准(替换)混合
Canvas 2 应该包含第二张图片,由您要使用的部分遮盖。将其叠加到 canvas 1 上,只要您正确处理透明度,应该会产生您想要的效果。
假设您的目标浏览器支持 SVG,您也可以使用两个带有图像背景的 SVG 圆圈并简单地执行此操作。
只需在图像顶部绘制一个半透明的填充圆弧(根据您的喜好调整 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>