html5 背景平移,4.1 平移画布上下文 - HTML5 Canvas 实战

本节，我们将学习如何完成HTML5画布API中的最基本且最常用的变换操作——平移。如果你对变换的术语感到陌生，其实，“translation”只不过是"move"的一个比较花哨的说法。本例中，我们将画布上下文移动到画布上的一个新位置。

图4-1 平移画布上下文

绘制步骤

按照以下步骤，绘制一个被平移到画布的中央：

1. 定义画布上下文及矩形的尺寸：

window.onload = function(){

var canvas  = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var rectWidth  =  150;

var rectHeight  =  75;

2. 将画布上下文平移到画布的中央：

//将画布上下文平移到画布的中央

context.translate(canvas.width  /  2, canvas.height  /  2);

3. 绘制一个矩形，该矩形位于被平移的画布上下文的中央：

context.fillStyle  = "blue";

context.fillRect(-rectWidth  /  2,  -rectHeight  /  2, rectWidth, rectHeight);

};

4. 在HTML文档的body部分嵌入canvas标签：

工作原理

这里是工作原理。

图4-2 平移的工作原理

HTML5画布变换背后的思想是，以某种方式变化画布上下文，然后在画布上绘制图形。本节，我们平移了画布上下文，这样以来，画布上下文的左上角就被移动到了画布的中央：

context.translate(tx,ty);

tx参数对应水平方向上的平移，ty参数对应垂直方向上的平移。一旦上下文被改变，我们就可以绘制以画布上下文的左上角为中心的矩形。其最终结果是矩形被平移到了画布的中央。