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就出不來求幫忙看看是什么問題
畫布source-in和source-out效果
StupidFox
2017-03-28 21:54:18
