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