画布source-in和source-out效果

Question

var can1=null;
var c1=null;
var img=null;
//页面加载
window.onload=function(){
 can1=document.getElementById("canone");
 c1=can1.getContext("2d");
 c1.save();
 img=document.getElementById("tulips");
 
 var btnAtop=document.getElementById("atop");
 var btnIn=document.getElementById("in");
 var btnOut=document.getElementById("out");
//按钮
 btnAtop.onclick=function(){
  c1.restore();
  c1.clearRect(0,0,can1.width,can1.height);
  c1.save();
  source_atop();
 }
 btnIn.onclick=function(){
  c1.restore();
  c1.clearRect(0,0,can1.width,can1.height);
  c1.save();
  source_in();
 }
 btnOut.onclick=function(){
  c1.restore();
  c1.clearRect(0,0,can1.width,can1.height);
  c1.save();
  source_out();
 }

//source-atop
function source_atop(){
 c1.fillStyle="pink";
 c1.beginPath();
 c1.arc(200,150,130,0,2*Math.PI);
 c1.closePath();
 c1.fill();
 c1.globalCompositeOperation="source-atop";
 c1.drawImage(img,40,20,img.width*0.8,img.height*0.7);
 c1.fillStyle="#fff";
 c1.font="18px 微软雅黑";
 c1.fillText("source-atop",160,255);
}
function source_in(){
 c1.fillStyle="pink";
 c1.beginPath();
 c1.arc(200,150,130,0,2*Math.PI);
 c1.closePath();
 c1.fill();
 c1.globalCompositeOperation="source-in";
 c1.drawImage(img,40,20,img.width*0.8,img.height*0.7);
 c1.fillStyle="#fff";
 c1.font="18px 微软雅黑";
 c1.fillText("source-in",160,255);
}
function source_out(){
 c1.fillStyle="pink";
 c1.beginPath();
 c1.arc(200,150,130,0,2*Math.PI);
 c1.closePath();
 c1.fill();
 c1.globalCompositeOperation="source-out";
 c1.drawImage(img,40,20,img.width*0.8,img.height*0.7);
 c1.fillStyle="#fff";
 c1.font="18px 微软雅黑";
 c1.fillText("source-out",160,255);
}

source_atop是正常的，但是in和out就出不来

求帮忙看看是什么问题

Answer 1

你这个没有html，最好把那个也粘出来