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就出不来求帮忙看看是什么问题
添加回答
举报
0/150
提交
取消