有没有办法在画布中平滑剪切蒙版路径?我似乎在网上找不到解决方法。在Firefox中非常平滑,但在Chrome或Safari中不是这样。以下是示例代码和Codepen链接:
http://codepen.io/VincentPeters/pen/LNdZba?editors=0010
var canvas = document.getElementById('game');
var img;
var circleSize = 100;
var imageLoaded = false;
$(document).ready(function () {
//circles in percentage
var circles = [
[85, 75],
[25, 65],
[75, 40],
[30, 30]
];
var ctx = initCanvas();
circles = calculateCirclePositions(ctx, circles);
img.onload = function () {
imageLoaded = true;
drawCircles(ctx, circles);
drawConnection(ctx, circles);
};
});
function calculateCirclePositions(ctx, circles) {
for (var i = 0; i < circles.length; i++) {
circles[i][0] = (circles[i][0] / 100) * ctx.canvas.width;
circles[i][1] = (circles[i][1] / 100) * ctx.canvas.height;
}
return circles;
}
function initCanvas() {
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.canvas.width = 600;
ctx.canvas.height = 600;
img = new Image();
imageLoaded = false;
img.src = 'http://i.imgur.com/jDp7UPB.jpg';
return ctx;
}
function drawCircles(ctx, circles) {
if (!imageLoaded) {
return;
}
circles.forEach(function (entry) {
drawCircle(ctx, entry[0], entry[1])
});
}
function drawCircle(ctx, x, y) {
if (!imageLoaded) {
return;
}
ctx.save();
ctx.beginPath();
ctx.arc(x, y, circleSize / 2, 0, 2 * Math.PI);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
ctx.restore();
}
function drawConnection(ctx, circles) {
for (var i = 0; i < circles.length - 1; i++) {
var V = [];
var N = [];
var R1 = [];
var R2 = [];
var R3 = [];
var R4 = [];
V[0] = circles[i + 1][0] - circles[i][0];
V[1] = circles[i + 1][1] - circles[i][1];
var length = Math.sqrt(V[1] * V[1] + -V[0] * -V[0]);
N[0] = V[1] / length;
N[1] = -V[0] / length;
R1 = [
circles[i][0] + N[0] * circleSize / 2,
circles[i][1] + N[1] * circleSize / 2];
R2 = [circles[i][0] - N[0] * circleSize / 2,
circles[i][1] - N[1] * circleSize / 2];
R3 = [circles[i + 1][0] + N[0] * circleSize / 2,
circles[i + 1][1] + N[1] * circleSize / 2];
R4 = [circles[i + 1][0] - N[0] * circleSize / 2,
circles[i + 1][1] - N[1] * circleSize / 2];
ctx.save();
ctx.moveTo(R1[0], R1[1]);
ctx.lineTo(R2[0], R2[1]);
ctx.lineTo(R4[0], R4[1]);
ctx.lineTo(R3[0], R3[1]);
ctx.lineTo(R1[0], R1[1]);
ctx.clip();
ctx.closePath();
ctx.drawImage(img, 0, 0);
ctx.restore();
}
}
globalCompositeOperation
和离屏画布可以获得更好的结果:http://codepen.io/anon/pen/YqaeGL?editors=0010 - Kaiido