Question

如何在固定的canvas画布内缩放

Answer 1

<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript'>

function bindchangesize(jq){
var touchstarttime = 0; //记录手指按住屏幕的时间
var dbx = 0;
var dby = 0;
var pretevent = false;
var startX; //按住时坐标X
var startY; //按住时坐标Y
var startLen;
var isstart = false;
var isonefinger = true; //判断是否是一只手指按住屏幕
jq.bind('touchstart',_touchstart);
jq.bind('touchmove',_touchmove);
jq.bind('touchend',_touchend);

function _touchstart(e){
isstart = true;
isonefinger = true;
if(pretevent){
e.stopPropagation();
}
var ttime = (new Date()).getTime();
var touch;
if(typeof e.clientX != 'undefined'){
touch = e;
}else{
touch = e.originalEvent.touches[0];
if(e.originalEvent.touches && e.originalEvent.touches.length > 1){
isonefinger = false;
}
}
startX = touch.clientX;
startY = touch.clientY;
if(!isonefinger){
var touch1 = e.originalEvent.touches[1];
var x = touch1.clientX;
var y = touch1.clientY;
startLen = Math.sqrt(Math.pow(startX - x,2) + Math.pow(startY - y,2));
}
if(!isonefinger){
touchstarttime = ttime;
}

}
function _touchmove(e){
var touch;
var jq0 = $(this);
jq0.stop(true,true);
if(typeof e.clientX !='undefined'){
touch=e;
}else{
touch= e.originalEvent.touches[0];
}
var x = touch.clientX;
var y = touch.clientY;
var zoom = jq0.get(0).style.zoom;
if(zoom == 0) zoom = 1;

if(!isonefinger){
var touch1 = e.originalEvent.touches[1];
var x1 = touch1.clientX;
var y1 = touch1.clientY;
var nowlen = Math.sqrt(Math.pow(x1 - x,2) + Math.pow(y1 - y,2));
var len = nowlen - startLen;
if(len < 0){
len = nowlen;
}else{
len = startLen + len;
}
var percent = len/startLen;

var changezoom = zoom*percent;
if(changezoom>5){
changezoom = 5;
}
if(changezoom<0.5){
changezoom = 0.5;
}

jq0.animate({zoom:changezoom});
}
}
function _touchend(e){
startX = null;
startY = null;
isstart = false;
isonefinger=true;
startLen = 0;
}
}
function bindevent(){
var jqcanvas1 = $('#canvasid'); //通过ID找到canvas
bindchangesize(jqcanvas1);
}
</script>

简单的写了一个，你试试
通过zoom属性来控制的