Круглая культура для html canvas

Question

У меня есть квадратный контекст, и я пытаюсь «разрезать» холст в круг. Я пробовал использовать clip(), но это работает только до того, что на холст нарисованы вещи. Есть ли способ обрезать холст после того, как все на нем нарисовано?

Answer 1

Вы можете использовать context.globalCompositeOperation='destination-in', чтобы сделать клип «после факта».

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/desert1.jpg"; 
 
function start(){ 
 
    var cw,ch; 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 
    ctx.globalCompositeOperation='destination-in'; 
 
    ctx.beginPath(); 
 
    ctx.arc(cw/2,ch/2,ch/2,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

Original Image:<br> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/desert1.jpg'><br> 
 
Clip existing content into circle with Compositing<br> 
 
<canvas id="canvas" width=300 height=300></canvas>