canvas整体放大_canvas 平移&缩放

1.平移

canvas其实只是一个包装器，真正起着重要作用的部分是2D渲染上下文，这才是我们真正绘制图形的地方。

然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统，以左上角(0,0)坐标为原点。

向右移动时x的坐标值增加，向下移动时y的坐标值增加。

好了了解了坐标系统之后，咱们就可以尽情的移动处理图形的位置了！

平移，也就是参照2D渲染上下文的原点(0,0)，将图形从一个坐标点移动到另一个坐标点的过程！

使用方法：translate(x,y) 两个参数分别以原点为坐标 向左增加x个单位值，向下增加y个单位值。

变形

window.οnlοad= function() {varcanvas=document.getElementById("myCanvas");varcontext=canvas.getContext("2d");

context.fillRect(150,150,100,100);

context.translate(150,150);//设置平移

context.fillStyle= "rgb(255,0,0)";

context.fillRect(150,150,100,100);//执行位移后，将原点坐标(150,150)分别加上150，即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。

context.fillStyle= "rgb(0,255,255)";

context.translate(150,150);//两次位移 相当于位移了300 还是以(300,300)为坐标进行绘制

context.fillRect(0,0,100,100);

}

您的浏览器暂不支持画布！