189 8069 5689
eastPoint(ex,ey);东 southPoint(sx,sy);南 westPoint(wx,wy);西 northPint(nx,ny);北 中心点坐标 centerPoint((ex+sx)/2,(wy+ny)/2);
在鹤山等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计制作、网站建设 网站设计制作定制网站建设,公司网站建设,企业网站建设,品牌网站建设,营销型网站,成都外贸网站建设公司,鹤山网站建设费用合理。
只要算出红框距离图片边框的距离就可以了。
首先，红点坐标（x, y），图片宽高（w, h），红框即网页宽高（yw, yh），这些是已知的吧？
求红框距离图片边框距离宽高（mw, mh）
图片用IMG节点放置在一个DIV里，宽高auto
现在问题就变成这个DIV定位的问题了，根据上面那些数据很容易算出来的，这里就不详细说啦。
给你一个旋转的demo:
!DOCTYPE html
html
body
canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"
Your browser does not support the HTML5 canvas tag.
/canvas
br/
input type="text" id="angle_v" readonly="1"/
script
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(100,45)
//ctx.rotate(70*Math.PI/180);
//ctx.fillRect(-50,-25,100,50);
var angle=10;
var angle_now = 0;
myRotate()
function myRotate()
{
ctx.clearRect(-100,-50,200,100);//x2 是为了把原来的图全部抹掉（不留下痕迹）
ctx.rotate(angle*Math.PI/180);
ctx.fillRect(-50,-25,100,50);
angle_now= (angle_now + angle)%360;
document.getElementById("angle_v").value="当前角度:"+angle_now;
setTimeout(myRotate,1000);
}
/script
/body
/html
注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45)
坐标中心点计算公式：x = 左上角x + 宽度/2
y = 左上角y + 高度/2
然后translate到(x,y)即可，之后调用rotate进行旋转。
旋转之后填充时注意：ctx.fillRect(-50,-25,100,50);
x = - 宽度/2
y = -高度/2
fillRect(x,y,宽度，高度)
你的例子，代码控制比较看不懂。。。，所以没在基础上整改。
补充一个参考网站（英文的）：
（如果有帮助，望采纳，谢谢）
获取浏览器宽高是：
winWidth=document.body.clientWidth||document.documentElement.clientWidth
winHeight=document.body.clientHeight||document.documentElement.clientHeight
那么中心点应该就是取1/2
Var center={centerW:winWidth/2,centerH:winHeight/2};