Canvas 平移 translate()

平移 (translate) 就是将一个图形往水平方向和垂直方向移动一定的距离 (dx,dy)

但是,Canvas 中的所有几何变换针对的不是绘制的图形,而是针对画布本身

例如刚开始的时候在 (50,50) 绘制一个 100x50 的矩形可能是这样的

灰色的底为画布(canvas),绿色的边框为屏幕

当我们使用 translate(50,50) 将画布水平和垂直方向各移动 50

然后在 (50,50) 绘制一个 100x50 的矩形就是这样的了

此时矩形的起点距离屏幕左上角就已经是 (100,100)

Canvas translate()

ctx.translate() 方法将将 canvascanvas 原点往水平和垂直方向各移动一定的距离

语法

void ctx.translate(dx, dy);
参数 说明
dx 水平方向的移动距离
dy 垂直方向的移动距离

范例

下面的范例先在点 (50,50) 绘制一个橘黄色的 100x50 的矩形,然后平移 canvas (50,50) 最后在点 (50,50) 绘制一个 100x50 的绿色矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(50,50,100,50);
ctx.translate(50,50);
ctx.fillStyle="green";
ctx.fillRect(50,50,100,50);
</script>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.