캔버스의 테두리 너비를 포함하여 모양의 높이와 너비를 계산하는 방법은 무엇입니까?

HTML5 및 javascript.I을 사용하는 프로젝트에서 어떤 문서를로드 할 캔버스가 있습니다.캔버스의 테두리 너비를 포함하여 모양의 높이와 너비를 계산하는 방법은 무엇입니까?

canvas = document.getElementById('pdf'); 
ctx = canvas.getContext('2d');

위의 캔버스에 문서가로드됩니다. 나는 드로잉에서 각 셰이프 (필수)마다 새로운 캔버스를 만들어야한다는 것을 런타임시 개별 캔버스로 다른 셰이프를 그려야합니다.

MouseDown

function mouse_Pressed(e) { 
    getMouse(e);//getting current X and Y position 
x1=mx; y1=my; 
    var cords=getMousePos(canvas,e); 
    annCanvas=document.createElement('canvas'); //Creating 
    annCanvasContext=annCanvas.getContext('2d'); 
    isDraw=true;isDrawAnn=true; 
}

MouseMove 이벤트

function mouse_Dragged(e) 
{ 
    if(isDraw) 
    { 
    getMouse(e); 
    x2=mx; y2=my; 
    calculatePoints(x1,y1,x2,y2); 
    var width=endX-startX; 
    var height=endY-startY; 
    annCanvas.style.position = "absolute"; 
    annCanvas.width=4; //Width of square 
    annCanvas.style.left=""+startX+"px"; 
    annCanvas.style.top=""+startY+"px"; 
    annCanvas.height=height; 
    annCanvas.style.zIndex="100000"; 

    document.getElementById("canvas").appendChild(annCanvas); 
    annCanvasContext.fillStyle='rgb(255,255,0)'; 
    annCanvasContext.lineWidth=borderWidth; 
    annCanvasContext.strokeRect(0,0,width,height); 
    annCanvasContext.stroke(); 
} 
}

는

function mouse_Released(e) { isDrag = false; isDraw=false; isDrawAnn=false; }

홈페이지 문제가을의 mouseReleased 내가 테두리 너비가 50 인 직사각형을 그릴 경우 캔버스 외부 부분은 캔버스의 영역이 적어서 잘릴 것입니다. rect 모양). 그래서 그 borderWidth와 캔버스 높이, 너비를 계산 싶어요.

출처

2012-09-17 Shanky

이 계정에 테두리 폭을뿐만 아니라 등 폭해야

function init() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var s = size(canvas); 
    alert(s[0]); 
} 


function size(el) { 
    var clientHeight = (el.offsetHeight > el.clientHeight) ? el.offsetHeight : el.clientHeight; 
    var clientWidth = (el.offsetWidth > el.clientWidth) ? el.offsetWidth : el.clientWidth; 
    return [clientWidth, clientHeight]; 
};

HTML :

<body onload="init();"> 
<canvas id="canvas" width="200" height="300" style="width: 500px; height: 400px; border: 10px solid brown;"></canvas> 
</body>

출처

2012-09-17 09:04:29

캔버스의 테두리 너비를 포함하여 모양의 높이와 너비를 계산하는 방법은 무엇입니까?

답변

관련 문제