translate() 是 Canvas 2D API 通过在网格中移动 canvas 和 canvas 原点 x 水平方向、原点 y 垂直方向,添加平移变换的方法。
在位置(10,10)绘制一个矩形,将新的(0,0)位置设置为(70,70)。再次绘制相同的矩形(注意,矩形现在从(80,80)位置开始:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML canvas translate()方法使用-基础教程(niaoge.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(10,10,100,50); ctx.translate(70,70); ctx.fillRect(10,10,100,50); </script> </body> </html>测试看看 ‹/›
IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 translate() 方法。
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
translate() 方法重新映射画布上的(0,0)位置。
注意:当您在 translate() 之后调用诸如 fillRect() 之类的方法时,值会添加到 x 和 y 坐标值上。
JavaScript 语法: | context.translate(x,y); |
---|
注意: You can specify one or both parameters.
参数 | 描述 |
---|---|
x | 添加到水平坐标(x)上的值。 |
y | 添加到垂直坐标(y)上的值。 |