html中心点缩放,html canvas 让物体随物体中心缩放

let cv=document.querySelector('.cv'),

ctx=cv.getContext('2d'),

sv= 0,//缩放的增加值

speed= 0.01,//缩放增加速度

/** @param Number sx 物体开始绘制的x点

* @param Number sy 物体开始绘制的y点

* @param Number width 物体开始绘制的宽

* @param Number height 物体开始绘制的高*/getCenter=(sx, sy, width, height)=>{//返回物体的中心点

return{

x: sx+(width/ 2),

y: sy+(height/ 2)

};

},/** 绘制图形*/draw=()=>{

let arc_x= 150,//圆心x轴

arc_y= 150,//圆心y轴

arc_r= 20,//圆半径

rect_x= 300,//矩形x轴

rect_y= 100,//矩形y轴

rect_width= 50,//矩形的宽

rect_height= 50,//矩形的高

line_sx= 500,//直线起点x轴

line_sy= 100,//直线起点y轴

line_ex= 600,//直线终点x轴

line_ey= 210,//直线终点y轴

s={//缩放值

x:1 +sv,

y:1 +sv

},

arc_center=getCenter(arc_x-arc_r, arc_y-arc_r,2 *arc_r,2 *arc_r),//圆心

rect_center=getCenter(rect_x, rect_y, rect_width, rect_height),//矩形中心

line_center=getCenter(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);//直线中心

ctx.clearRect(0,0, cv.width, cv.height);//绘制圆

ctx.save();//保存状态，以免影响其它物体

ctx.scale(s.x, s.y);//执行缩放

ctx.translate(-(arc_center.x*(s.x- 1))/s.x,-(arc_center.y*(s.y- 1))/s.y);//缩放后的差偏移回来

ctx.beginPath();//开启路径

ctx.arc(arc_x, arc_y, arc_r,0,2 *Math.PI);//绘制圆

ctx.closePath();//关闭路径

ctx.stroke();//描边绘制

ctx.restore();//恢复状态

//绘制矩形

ctx.save();

ctx.scale(s.x, s.y);

ctx.translate(-(rect_center.x*(s.x- 1))/s.x,-(rect_center.y*(s.y- 1))/s.y);

ctx.beginPath();

ctx.strokeRect(rect_x, rect_y, rect_width, rect_height);

ctx.closePath();

ctx.restore();//绘制直线

ctx.save();

ctx.scale(s.x, s.y);

ctx.translate(-(line_center.x*(s.x- 1))/s.x,-(line_center.y*(s.y- 1))/s.y);

ctx.beginPath();

ctx.moveTo(line_sx, line_sy);

ctx.lineTo(line_ex, line_ey);

ctx.closePath();

ctx.stroke();//绘制线的外框，以便明显线的缩放

ctx.beginPath();

ctx.strokeStyle= '#bbb';

ctx.strokeRect(line_sx, line_sy, line_ex-line_sx, line_ey-line_sy);

ctx.closePath();

ctx.restore();

sv+=speed;if(sv<= 2) {

requestAnimationFrame(draw);

}

};//画布大小

cv.width= 800;

cv.height= 500;

window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(callback) {

callback&&setTimeout(callback,1000 / 60);

};

draw();//开始绘制缩放