在浏览器上可以跑
打包到手机里却没办法跑
想请问一下应该要如何修改
是因为事件event 在手机上不支援的关系吗
onmousedown="clipstart(event)"
onmouseup="clipstop(event)"
onmousemove="onmove(event)"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
div#imgarea{
background-image: url(images/XXX.jpg);
background-repeat: no-repeat;float: left;
}
canvas#pCanvas{
cursor: pointer;
}
canvas#cimage{
border: 1px dotted;
}
</style>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
});
var canvas, context, image, ccanvas , ccontext;
function init () {
ccanvas = document.getElementById("cimage");
ccontext = ccanvas.getContext("2d");
canvas = document.getElementById("pCanvas");
context =canvas.getContext("2d");
context.lineWidth=6;
context.strokeStyle='silver';
image=new Image();
image.src="images/XXX.jpg";
}
var startx=0,starty=0;
var stopx=0;
var stopy=0;
var cb=0;
function clipstart(event){
startx=event.x;
starty=event.y;
cb=1;
}
function clipstop(event){
stopx=event.x;
stopy=event.y;
cb=0;
}
function onmove(event){
if (cb==1){
context.clearRect(0,0,canvas.width,canvas.height);
var h = event.y - starty;
var w = event.x - startx;
context.strokeRect(startx,starty,w,h);
}
}
function drawCImage(event){
ccontext.clearRect(0,0,ccanvas.width,ccanvas.height);
var h = stopy - starty;
var w = stopx - startx;
ccontext.drawImage(image,startx,starty,w,h,0,0,w,h);
}
</script>
</head>
<body>
<body onload="init()">
<div>
<div id="imgarea">
<canvas id="pCanvas" width="600" height="400"
onmousedown="clipstart(event)"
onmouseup="clipstop(event)"
onmousemove="onmove(event)"
></canvas>
</div>
<div>
<canvas id="cimage" width="600" height="400" onmousedown="drawCImage(event)">
</canvas>
</div>
</div>
</body>
</body>
</html>
