<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>画板</title>
</head>
<script type="text/javascript" src='jquery-2.1.0.js'></script>
<style>
*{margin: 0px ; padding: 0px;list-style: none;text-decoration: none;}
body,html{max-width: 640px;min-width: 320px;width: 100%;margin: 0px auto;height: 100%;}
</style>
<body>
<canvas id="canvas" width="370" height="600"></canvas>
</body>
<script type="text/javascript">
var startX = '';
var startY = '';
window.addEventListener('load',load, false);
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
var opa = 1 ;
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("id");
switch(event.type){
case "touchstart":
//console.log('开始'+event.touches[0].clientX + "," + event.touches[0].clientY);
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
context.beginPath()
break;
case "touchend":
//console.log('结束'+event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY);
context.closePath()
temp = 1 ;
break;
case "touchmove":
event.preventDefault();
var moverX = (event.touches[0].clientX)-startX ;
var moverY = (event.touches[0].clientY)-startY ;
drawLine(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
break;
}
}
}
var d=document.getElementById("canvas");
var context = d.getContext("2d");
var start_x = startX;
var start_y = startY;
var temp = 1 ;
function drawLine(x,y){
if(temp){ start_x = startX; start_y = startY; temp=0;}
context.moveTo(start_x,start_y)
context.lineTo(x,y)
context.stroke()
start_x = x ;
start_y = y ;
}
</script>
</html>
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
