Halaman

Minggu, 12 Januari 2014

Resize Canvas - html5

function getViewport() {
var viewPortWidth;
var viewPortHeight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight;
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}

// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}

return [viewPortWidth, viewPortHeight];
}

function resize_canvas(){
var t = getViewport();

innerWidth = t[0];//window.innerWidth;
innerHeight = t[1];//window.innerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

canvas.width=canvasWidth*scaleFix;
canvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);

canvas.style.left="100px";
canvas.style.top="100px";
canvas.style.marginLeft="100px";
canvas.style.marginTop="100px";

canvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

canvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";

}


sumber:
http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto

Tidak ada komentar:

Posting Komentar