Предполагая, что у меня есть:
var context = document.getElementById('test').getContext('2d');
// Background
context.fillStyle = '#000';
context.fillRect(0,0,300,300);
// 'P'
context.beginPath();
context.moveTo(90,89);
context.lineTo(161,89);
context.quadraticCurveTo(200,89,200,127);
context.quadraticCurveTo(200,166,148,166);
context.lineTo(115,166);
context.lineTo(108,210);
context.lineTo(69,210);
context.lineTo(90,89);
context.fillStyle = "#eee";
context.fill();
context.closePath();
context.globalCompositeOperation = 'destination-out';
// 'P' hole
context.beginPath();
context.moveTo(124,117);
context.lineTo(146,117);
context.quadraticCurveTo(160,117,160,127);
context.quadraticCurveTo(160,145,146,145);
context.lineTo(120,145);
context.lineTo(124,117);
context.fillStyle = '#ffffff';
context.fill();
context.closePath();
Это работает, за исключением того, что вы видите, что «дыра» не клип, поэтому, если фон не сплошной, вы просто не можете установить«Заполнить» цвет отверстия, чтобы соответствовать фону.
Поэтому мне нужно вместо этого обрезать отверстие.Однако, когда я делаю это, единственная часть «P», которая показывает, это часть, ограниченная клипом «дыра».Мне нужно обратное.Мне нужно показать 'P', но обрежьте часть с 'отверстием', чтобы любой фон просвечивал.
Вот, насколько я понял, но не совсем там:
var context = document.getElementById('test').getContext('2d');
// Background
context.fillStyle = '#000';
context.fillRect(0,0,300,300);
// 'P' hole clip
context.beginPath();
context.moveTo(124,117);
context.lineTo(146,117);
context.quadraticCurveTo(160,117,160,127);
context.quadraticCurveTo(160,145,146,145);
context.lineTo(120,145);
context.lineTo(124,117);
context.clip();
context.closePath();
// 'P'
context.beginPath();
context.moveTo(90,89);
context.lineTo(161,89);
context.quadraticCurveTo(200,89,200,127);
context.quadraticCurveTo(200,166,148,166);
context.lineTo(115,166);
context.lineTo(108,210);
context.lineTo(69,210);
context.lineTo(90,89);
context.fillStyle = "#eee";
context.fill();
context.closePath();
Спасибо за вашу помощь!