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);
}
您的浏览器暂不支持画布!