<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>canvas</title>
<style>
*{
margin: 0px;
padding:0px;
}
body,html{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas width="" height="" style="background: black;vertical-align: middle;" id="can">您的浏览器不支持CANVAS，请更新最新版浏览器。</canvas>
</body>
<!--<script src="js/zepto.V1.1.6.min.js" type="text/javascript"></script>-->
<!--<script src="js/zepTouch.js" type="text/javascript"></script>-->
<script type="text/javascript">
var can = document.getElementById('can');
var cxt = can.getContext('2d');
var windowWidth;
var windowHeight;
function resizeWindow(){
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
// console.log(windowWidth);
// console.log(windowHeight);
can.style.width = windowWidth+'px';
can.style.height = windowHeight+'px';
}
resizeWindow();
window.onresize=function(){
resizeWindow();
}
var moveX;
var moveY;
var drawDot = [];
function draw(moveX,moveY,arry){
cxt.clearRect(0,0,windowWidth,windowHeight);
cxt.strokeStyle='#fff';
cxt.lineWidth=2;
cxt.beginPath();
cxt.moveTo(moveX,moveY);
for(var i =0;i<arry.length;i++){
cxt.lineTo(arry[i].x,arry[i].y);
}
cxt.stroke();
}
can.addEventListener('touchstart',function(e){
var event = e||window.event;
var touch = event.touches[0];
moveX = touch.pageX;
moveY = touch.pageY;
console.log(moveX+' '+moveY);
},false);
can.addEventListener('touchmove',function(e){
var event = e||window.event;
var touch = event.touches[0];
var touchDot ={};
touchDot.x = touch.pageX;
touchDot.y = touch.pageY;
console.log(touchDot);
drawDot.push(touchDot);
draw(moveX,moveY,drawDot);
});
</script>
</html>