javascript - Draw image with x,y relating to the center point for the image? -
i'm trying draw image @ co-ordinate points x,y x , y being in center of image.
i have code found earlier rotating image:
function drawimagerot(img,x,y,width,height,deg) {   //convert degrees radian   var rad = deg * math.pi / 180;    //set origin center of image   context.translate(x + width / 2, y + height / 2);    //rotate canvas around origin   context.rotate(rad);    //draw image   context.drawimage(img, width / 2 * (-1), height / 2 * (-1), width, height);    //reset canvas   context.rotate(rad * ( -1 ) );   context.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); } however seems draw image below , right? i.e. x,y co-ordinates relate top left corner of image?
at beginning of method translates context top-left center. if want pass in center of image. can skip step, resulting in following code.
function drawimagerot(img,x,y,width,height,deg) {   //convert degrees radian   var rad = deg * math.pi / 180;     //set origin center of image   context.translate(x, y);    //rotate canvas around origin   context.rotate(rad);    //draw image   context.drawimage(img, width / 2 * (-1), height / 2 * (-1), width, height);    //reset canvas   context.rotate(rad * ( -1 ) );    //   context.translate((x) * (-1), (y) * (-1)); } don't forget have undo translation in same manner change translation.
Comments
Post a Comment