背景图片适配
引入jquery
<script src="./js/jquery-2.1.3.min.js"></script>
html布局
<body>
<div id="main">
<ul id="list">
<li></li>
</ul>
</div>
</body>
css样式
*{margin:0;padding:0;}
li{list-style: none;}
html{overflow: hidden;}
#main{position: relative;width: 640px;height: auto;overflow: hidden;}
#list{}
#list>li{position:absolute;left:0px;top:0px;width: 100%;height:100%;background-repeat:no-repeat ;background-size: cover;}
#list>li:nth-of-type(1){background-image:url("../img/b.png") ;}
js代码
$(function(){
var $main=$("#main");
var $list=$("#list");
var $li = $list.find('>li');
var viewHeight=$(window).height();
$main.css("height",viewHeight+'px');
function nowViewWidth(){
//640/960=w/viewHeight;
var w=640*viewHeight/960;
return w;
}
$li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0px');
});
短屏的时候不需要适配（宽度最小值不能小于640）
$(function(){
var $main=$("#main");
var $list=$("#list");
var $li = $list.find('>li');
var viewHeight=$(window).height();
$main.css("height",viewHeight+'px');
function nowViewWidth(){
//640/960=w/viewHeight;
var w=640*viewHeight/960;
//短屏的时候不需要适配
w=w>640?w:640;
return w;
}
$li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0px');
});
第一个效果：刮开效果
canvas：globalCompositeOperation属性
source-over 默认后绘制的在前面
destination-over 后绘制的在后面，之前绘制过的图形在前面
destination-out 交集消失，后绘制的图象消失
destination-out 交集留下，其余图象消失
html代码
<body>
<div id="main">
<canvas id="c1"></canvas>
<ul id="list">
<li></li>
</ul>
</div>
</body>
css代码
#c1{position:absolute;left:0;top:0;z-index: 10;width: 100%;height: 100%;}
js代码1（绘制canvas图象）
$(function(){
var $main=$("#main");
var $list=$("#list");
var $li = $list.find('>li');
var viewHeight=$(window).height();
$main.css("height",viewHeight+'px');
function nowViewWidth(){
//640/960=w/viewHeight;
var w=640*viewHeight/960;
//短屏的时候不需要适配
w=w>640?w:640;
return w;
}
slideCanvas();
function slideCanvas(){
var $c1=$("#c1");
var gc=$c1.get(0).getContext("2d");
$c1.attr("height",viewHeight);
var oImg=new Image();
oImg.src="./img/a.png";
oImg.onload=function(){
gc.drawImage(oImg,(640 - nowViewWidth())/2,0,nowViewWidth(),viewHeight);
};
}
$li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0px');
});
移动端移动事件（touchstart,touchmove,touchend）
移动端上pageX是在changedTouches下面
jq里面ev对象转原生使用originalEvent
canvas的像素级操作
当canvas对象透明度为0的像素超过一半时，所有的像素的透明度都为0
var imgData=gc.getImageData(0,0,640,viewHeight);
var allPx=imgData.width*imgData.height;
一共有多少像素。
imgData.data[]里面放的是rgba，透明度是imgData.data[4i+3]。
js代码
//清除默认的移动事件 在苹果下面会有
$(document).on("touchmove",function(ev){
ev.preventDefault();
});
$(function(){
var $main=$("#main");
var $list=$("#list");
var $li = $list.find('>li');
var viewHeight=$(window).height();
$main.css("height",viewHeight+'px');
function nowViewWidth(){
//640/960=w/viewHeight;
var w=640*viewHeight/960;
//短屏的时候不需要适配
w=w>640?w:640;
return w;
}
slideCanvas();
function slideCanvas(){
var $c1=$("#c1");
var gc=$c1.get(0).getContext("2d");
$c1.attr("height",viewHeight);
var oImg=new Image();
oImg.src="./img/a.png";
oImg.onload=function(){
gc.drawImage(oImg,(640 - nowViewWidth())/2,0,nowViewWidth(),viewHeight);
gc.fillStyle="red";
gc.lineWidth=85;
gc.lineCap="round";
gc.globalCompositeOperation="destination-out";
var bFlag=true;
$c1.on("touchstart",function(ev){
var touch=ev.originalEvent.changedTouches[0];
var x=touch.pageX-$(this).offset().left;
var y=touch.pageY-$(this).offset().top;
/*gc.arc(x,y,100,0,360*Math.PI/180);
gc.fill(); */
if(bFlag){
bFlag=false;
gc.moveTo(x,y);
gc.lineTo(x+1,y+1);
}else{
gc.lineTo(x,y);
}
gc.stroke();
$c1.on("touchmove.move",function(ev){
var touch=ev.originalEvent.changedTouches[0];
var x=touch.pageX-$(this).offset().left;
var y=touch.pageY-$(this).offset().top;
gc.lineTo(x,y);
gc.stroke();
var num=0;
var imgData=gc.getImageData(0,0,640,viewHeight);
var allPx=imgData.width*imgData.height;
for(var i=0;i<allPx;i++){
if(imgData.data[4*i+3]==0){
num++;
}
}
if(num>allPx/2){
$c1.animate({"opacity":0},1000,function(){
$c1.remove();
});
}
});
$c1.on("touchend.move",function(ev){
$c1.off('.move');
});
});
};
}
$li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0px');
});
