我正在使用HTML5和javascript进行项目 . 我有一个画布将在哪个文档上加载 .
canvas = document.getElementById('pdf');
ctx = canvas.getContext('2d');
在上面的画布中,将加载文档 . 我必须在运行时在其上绘制不同的形状作为单独的画布 . 所以在绘图上我必须为每个Shape(必需)创建一个新的画布 .
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();
}
}
MouseReleased
function mouse_Released(e)
{
isDrag = false;
isDraw=false;
isDrawAnn=false;
}
主要的问题是,如果我绘制边框宽度为50的矩形,那么它的Canvas外部部分将因为较少的画布区域(即矩形)而切割 . 所以我想用borderWidth计算画布高度,宽度 .
1 回答
这应该考虑到边框宽度以及宽度等 .
HTML: