摘要：貝塞爾曲線方法可以繪制一種類似的曲線。不同的是貝塞爾曲線需要兩個(gè)控制點(diǎn)而不是一個(gè)，線段的每一個(gè)端點(diǎn)都需要一個(gè)控制點(diǎn)。下面是描述貝塞爾曲線的簡(jiǎn)單示例。

來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目
原文：Drawing on Canvas
譯者：飛龍
協(xié)議：CC BY-NC-SA 4.0
自豪地采用谷歌翻譯
部分參考了《JavaScript 編程精解（第 2 版）》
繪圖就是欺騙。
M.C. Escher，由 Bruno Ernst 在《The Magic Mirror of M.C. Escher》中引用

瀏覽器為我們提供了多種繪圖方式。最簡(jiǎn)單的方式是用樣式來規(guī)定普通 DOM 對(duì)象的位置和顏色。就像在上一章中那個(gè)游戲展示的，我們可以使用這種方式實(shí)現(xiàn)很多功能。我們可以為節(jié)點(diǎn)添加半透明的背景圖片，來獲得我們希望的節(jié)點(diǎn)外觀。我們也可以使用transform樣式來旋轉(zhuǎn)或傾斜節(jié)點(diǎn)。

但是，在一些場(chǎng)景中，使用 DOM 并不符合我們的設(shè)計(jì)初衷。比如我們很難使用普通的 HTML 元素畫出任意兩點(diǎn)之間的線段這類圖形。

這里有兩種解決辦法。第一種方法基于 DOM，但使用可縮放矢量圖形（SVG，Scalable Vector Graphics）代替 HTML。我們可以將 SVG 看成文檔標(biāo)記方言，專用于描述圖形而非文字。你可以在 HTML 文檔中嵌入 SVG，還可以在

xmlns屬性把一個(gè)元素（以及他的子元素）切換到一個(gè)不同的 XML 命名空間。這個(gè)由url定義的命名空間，規(guī)定了我們當(dāng)前使用的語(yǔ)言。在 HTML 中不存在與標(biāo)簽，但這些標(biāo)簽在 SVG 中是有意義的，你可以通過這些標(biāo)簽的屬性來繪制圖像并指定樣式與位置。

let circle = document.querySelector("circle");
circle.setAttribute("fill", "cyan");

Before canvas.

After canvas.

const results = [
  {name: "Satisfied", count: 1043, color: "lightblue"},
  {name: "Neutral", count: 563, color: "lightgreen"},
  {name: "Unsatisfied", count: 510, color: "pink"},
  {name: "No comment", count: 175, color: "silver"}
];

因?yàn)檎{(diào)用了scale，因此圓形長(zhǎng)度變?yōu)樵瓉淼?3 倍，高度變?yōu)樵瓉淼囊话搿?b>scale可以調(diào)整圖像所有特征，包括線寬、預(yù)定拉伸或壓縮。如果將縮放值設(shè)置為負(fù)值，可以將圖像翻轉(zhuǎn)。由于翻轉(zhuǎn)發(fā)生在坐標(biāo)(0,0)處，這意味著也會(huì)同時(shí)反轉(zhuǎn)坐標(biāo)系的方向。當(dāng)水平縮放 –1 時(shí)，在x坐標(biāo)為 100 的位置畫出的圖形會(huì)繪制在縮放之前x坐標(biāo)為 –100 的位置。

為了翻轉(zhuǎn)一張圖片，只是在drawImage之前添加cx.scale(–1,–1)是沒用的，因?yàn)檫@樣會(huì)將我們的圖片移出到畫布之外，導(dǎo)致圖片不可見。為了避免這個(gè)問題，我們還需要調(diào)整傳遞給drawImage的坐標(biāo)，將繪制圖形的x坐標(biāo)改為 –50 而不是 0。另一個(gè)解決方案是在縮放時(shí)調(diào)整坐標(biāo)軸，這樣代碼就不需要知道整個(gè)畫布的縮放的改變。

除了scale方法還有一些其他方法可以影響畫布里坐標(biāo)系統(tǒng)的方法。你可以使用rotate方法旋轉(zhuǎn)繪制完的圖形，也可以使用translate方法移動(dòng)圖形。畢竟有趣但也容易引起誤解的是這些變換以棧的方式工作，也就是說每個(gè)變換都會(huì)作用于前一個(gè)變換的結(jié)果之上。

如果我們沿水平方向?qū)嫴计揭苾纱?，每次移?dòng) 10 像素，那么所有的圖形都會(huì)在右方 20 像素的位置重新繪制。如果我們先把坐標(biāo)系的原點(diǎn)移動(dòng)到(50, 50)的位置，然后旋轉(zhuǎn) 20 度（大約0.1π弧度），此次的旋轉(zhuǎn)會(huì)圍繞點(diǎn)(50,50)進(jìn)行。

但是如果我們先旋轉(zhuǎn) 20 度，然后平移原點(diǎn)到(50,50)，此次的平移會(huì)發(fā)生在已經(jīng)旋轉(zhuǎn)過的坐標(biāo)系中，因此會(huì)有不同的方向。變換發(fā)生順序會(huì)影響最后的結(jié)果。

我們可以使用下面的代碼，在指定的x坐標(biāo)處豎直反轉(zhuǎn)一張圖片。

function flipHorizontally(context, around) {
  context.translate(around, 0);
  context.scale(-1, 1);
  context.translate(-around, 0);
}

我們先把y軸移動(dòng)到我們希望鏡像所在的位置，然后進(jìn)行鏡像翻轉(zhuǎn)，最后把y軸移動(dòng)到被翻轉(zhuǎn)的坐標(biāo)系當(dāng)中相應(yīng)的位置。下面的圖片解釋了以上代碼是如何工作的：

上圖顯示了通過中線進(jìn)行鏡像翻轉(zhuǎn)前后的坐標(biāo)系。對(duì)三角形編號(hào)來說明每一步。如果我們?cè)?b>x坐標(biāo)為正值的位置繪制一個(gè)三角形，默認(rèn)情況下它會(huì)出現(xiàn)在圖中三角形 1 的位置。調(diào)用filpHorizontally首先做一個(gè)向右的平移，得到三角形 2。然后將其翻轉(zhuǎn)到三角形 3 的位置。這不是它的根據(jù)給定的中線翻轉(zhuǎn)之后應(yīng)該在的最終位置。第二次調(diào)用translate方法解決了這個(gè)問題。它“去除”了最初的平移的效果，并且使三角形 4 變成我們希望的效果。

我們可以沿著特征的豎直中心線翻轉(zhuǎn)整個(gè)坐標(biāo)系，這樣就可以畫出位置為(100,0)處的鏡像特征。

圖像變換的效果會(huì)保留下來。我們繪制出一次鏡像特征后，繪制其他特征時(shí)都會(huì)產(chǎn)生鏡像效果，這可能并不方便。

對(duì)于需要臨時(shí)轉(zhuǎn)換坐標(biāo)系統(tǒng)的函數(shù)來說，我們經(jīng)常需要保存當(dāng)前的信息，畫一些圖，變換圖像然后重新加載之前的圖像。首先，我們需要將當(dāng)前函數(shù)調(diào)用的所有圖形變換信息保存起來。接著，函數(shù)完成其工作，并添加更多的變換。最后我們恢復(fù)之前保存的變換狀態(tài)。

2D 畫布上下文的save與restore方法執(zhí)行這個(gè)變換管理。這兩個(gè)方法維護(hù)變換狀態(tài)堆棧。save方法將當(dāng)前狀態(tài)壓到堆棧中，restore方法將堆棧頂部的狀態(tài)彈出，并將該狀態(tài)作為當(dāng)前context對(duì)象的狀態(tài)。

下面示例中的branch函數(shù)首先修改變換狀態(tài)，然后調(diào)用其他函數(shù)（本例中就是該函數(shù)自身）繼續(xù)在特定變換狀態(tài)中進(jìn)行繪圖。

這個(gè)方法通過畫出一條線段，并把坐標(biāo)系的中心移動(dòng)到線段的端點(diǎn)，然后調(diào)用自身兩次，先向左旋轉(zhuǎn)，接著向右旋轉(zhuǎn)，來畫出一個(gè)類似樹一樣的圖形。每次調(diào)用都會(huì)減少所畫分支的長(zhǎng)度，當(dāng)長(zhǎng)度小于 8 的時(shí)候遞歸結(jié)束。

如果沒有調(diào)用save與restore方法，第二次遞歸調(diào)用branch將會(huì)在第一次調(diào)用的位置結(jié)束。它不會(huì)與當(dāng)前的分支相連接，而是更加靠近中心偏右第一次調(diào)用所畫出的分支。結(jié)果圖像會(huì)很有趣，但是它肯定不是一棵樹。

我們現(xiàn)在已經(jīng)了解了足夠多的畫布繪圖知識(shí)，我們已經(jīng)可以使用基于畫布的顯示系統(tǒng)來改造前面幾章中開發(fā)的游戲了。新的界面不會(huì)再是一個(gè)個(gè)色塊，而使用drawImage來繪制游戲中元素對(duì)應(yīng)的圖片。

我們定義了一種對(duì)象類型，叫做CanvasDisplay，支持第 14 章中的DOMDisplay的相同接口，也就是setState方法與clear方法。

這個(gè)對(duì)象需要比DOMDisplay多保存一些信息。該對(duì)象不僅需要使用 DOM 元素的滾動(dòng)位置，還需要追蹤自己的視口（viewport）。視口會(huì)告訴我們目前處于哪個(gè)關(guān)卡。最后，該對(duì)象會(huì)保存一個(gè)filpPlayer屬性，確保即便玩家站立不動(dòng)時(shí)，它面朝的方向也會(huì)與上次移動(dòng)所面向的方向一致。

class CanvasDisplay {
  constructor(parent, level) {
    this.canvas = document.createElement("canvas");
    this.canvas.width = Math.min(600, level.width * scale);
    this.canvas.height = Math.min(450, level.height * scale);
    parent.appendChild(this.canvas);
    this.cx = this.canvas.getContext("2d");

    this.flipPlayer = false;

    this.viewport = {
      left: 0,
      top: 0,
      width: this.canvas.width / scale,
      height: this.canvas.height / scale
    };
  }

  clear() {
    this.canvas.remove();
  }
}

setState方法首先計(jì)算一個(gè)新的視口，然后在適當(dāng)?shù)奈恢美L制游戲場(chǎng)景。

CanvasDisplay.prototype.setState = function(state) {
  this.updateViewport(state);
  this.clearDisplay(state.status);
  this.drawBackground(state.level);
  this.drawActors(state.actors);
};

與DOMDisplay相反，這種顯示風(fēng)格確實(shí)必須在每次更新時(shí)重新繪制背景。 因?yàn)楫嫴忌系男螤钪皇窍袼兀栽谖覀兝L制它們之后，沒有什么好方法來移動(dòng)它們（或?qū)⑺鼈円瞥?更新畫布顯示的唯一方法，是清除它并重新繪制場(chǎng)景。 我們也可能發(fā)生了滾動(dòng)，這要求背景處于不同的位置。

updateViewport方法與DOMDisplay的scrollPlayerintoView方法相似。它檢查玩家是否過于接近屏幕的邊緣，并且當(dāng)這種情況發(fā)生時(shí)移動(dòng)視口。

CanvasDisplay.prototype.updateViewport = function(state) {
  let view = this.viewport, margin = view.width / 3;
  let player = state.player;
  let center = player.pos.plus(player.size.times(0.5));

  if (center.x < view.left + margin) {
    view.left = Math.max(center.x - margin, 0);
  } else if (center.x > view.left + view.width - margin) {
    view.left = Math.min(center.x + margin - view.width,
                         state.level.width - view.width);
  }
  if (center.y < view.top + margin) {
    view.top = Math.max(center.y - margin, 0);
  } else if (center.y > view.top + view.height - margin) {
    view.top = Math.min(center.y + margin - view.height,
                        state.level.height - view.height);
  }
};

對(duì)Math.max和Math.min的調(diào)用保證了視口不會(huì)顯示當(dāng)前這層之外的物體。Math.max(x,0)保證了結(jié)果數(shù)值不會(huì)小于 0。同樣地，Math.min`保證了數(shù)值保持在給定范圍內(nèi)。

在清空?qǐng)D像時(shí)，我們依據(jù)游戲是獲勝（明亮的顏色）還是失敗（灰暗的顏色）來使用不同的顏色。

CanvasDisplay.prototype.clearDisplay = function(status) {
  if (status == "won") {
    this.cx.fillStyle = "rgb(68, 191, 255)";
  } else if (status == "lost") {
    this.cx.fillStyle = "rgb(44, 136, 214)";
  } else {
    this.cx.fillStyle = "rgb(52, 166, 251)";
  }
  this.cx.fillRect(0, 0,
                   this.canvas.width, this.canvas.height);
};

要畫出一個(gè)背景，我們使用來自上一節(jié)的touches方法中的相同技巧，遍歷在當(dāng)前視口中可見的所有瓦片。

let otherSprites = document.createElement("img");
otherSprites.src = "https://gitee.com/wizardforcel/eloquent-js-3e-zh/raw/master/img/sprites.png";

CanvasDisplay.prototype.drawBackground = function(level) {
  let {left, top, width, height} = this.viewport;
  let xStart = Math.floor(left);
  let xEnd = Math.ceil(left + width);
  let yStart = Math.floor(top);
  let yEnd = Math.ceil(top + height);
  for (let y = yStart; y < yEnd; y++) {
    for (let x = xStart; x < xEnd; x++) {
      let tile = level.rows[y][x];
      if (tile == "empty") continue;
      let screenX = (x - left) * scale;
      let screenY = (y - top) * scale;
      let tileX = tile == "lava" ? scale : 0;
      this.cx.drawImage(otherSprites,
                        tileX,         0, scale, scale,
                        screenX, screenY, scale, scale);
    }
  }
};

非空的瓦片是使用drawImage繪制的。otherSprites包含了描述除了玩家之外需要用到的圖片。它包含了從左到右的墻上的瓦片，火山巖瓦片以及精靈硬幣。

背景瓦片是20×20像素的，因?yàn)槲覀儗⒁玫?b>DOMDisplay中的相同比例。因此，火山巖瓦片的偏移是 20，墻面的偏移是 0。

我們不需要等待精靈圖片加載完成。調(diào)用drawImage時(shí)使用一幅并未加載完畢的圖片不會(huì)有任何效果。因?yàn)閳D片仍然在加載當(dāng)中，我們可能無法正確地畫出游戲的前幾幀。但是這不是一個(gè)嚴(yán)重的問題，因?yàn)槲覀兂掷m(xù)更新熒幕，正確的場(chǎng)景會(huì)在加載完畢之后立即出現(xiàn)。

前面展示過的走路的特征將會(huì)被用來代替玩家。繪制它的代碼需要根據(jù)玩家的當(dāng)前動(dòng)作選擇正確的動(dòng)作和方向。前 8 個(gè)子畫面包含一個(gè)走路的動(dòng)畫。當(dāng)玩家沿著地板移動(dòng)時(shí)，我們根據(jù)當(dāng)前時(shí)間把他圍起來。我們希望每 60 毫秒切換一次幀，所以時(shí)間先除以 60。當(dāng)玩家站立不動(dòng)時(shí)，我們畫出第九張子畫面。當(dāng)豎直方向的速度不為 0，從而被判斷為跳躍時(shí)，我們使用第 10 張，也是最右邊的子畫面。

因?yàn)樽赢嬅鎸挾葹?24 像素而不是 16 像素，會(huì)稍微比玩家的對(duì)象寬，這時(shí)為了騰出腳和手的空間，該方法需要根據(jù)某個(gè)給定的值（playerXOverlap）調(diào)整x坐標(biāo)的值以及寬度值。

let playerSprites = document.createElement("img");
playerSprites.src = "https://gitee.com/wizardforcel/eloquent-js-3e-zh/raw/master/img/player.png";
const playerXOverlap = 4;

CanvasDisplay.prototype.drawPlayer = function(player, x, y,
                                              width, height){
  width += playerXOverlap * 2;
  x -= playerXOverlap;
  if (player.speed.x != 0) {
    this.flipPlayer = player.speed.x < 0;
  }

  let tile = 8;
  if (player.speed.y != 0) {
    tile = 9;
  } else if (player.speed.x != 0) {
    tile = Math.floor(Date.now() / 60) % 8;
  }

  this.cx.save();
  if (this.flipPlayer) {
    flipHorizontally(this.cx, x + width / 2);
  }
  let tileX = tile * width;
  this.cx.drawImage(playerSprites, tileX, 0, width, height,
                                   x,     y, width, height);
  this.cx.restore();
};

drawPlayer方法由drawActors方法調(diào)用，該方法負(fù)責(zé)畫出游戲中的所有角色。

CanvasDisplay.prototype.drawActors = function(actors) {
  for (let actor of actors) {
    let width = actor.size.x * scale;
    let height = actor.size.y * scale;
    let x = (actor.pos.x - this.viewport.left) * scale;
    let y = (actor.pos.y - this.viewport.top) * scale;
    if (actor.type == "player") {
      this.drawPlayer(actor, x, y, width, height);
    } else {
      let tileX = (actor.type == "coin" ? 2 : 1) * scale;
      this.cx.drawImage(otherSprites,
                        tileX, 0, width, height,
                        x,     y, width, height);
    }
  }
};

當(dāng)需要繪制一些非玩家元素時(shí)，我們首先檢查它的類型，來找到與正確的子畫面的偏移值。熔巖瓷磚出現(xiàn)在偏移為 20 的子畫面，金幣的子畫面出現(xiàn)在偏移值為 40 的地方（放大了兩倍）。

當(dāng)計(jì)算角色的位置時(shí)，我們需要減掉視口的位置，因?yàn)?b>(0,0)在我們的畫布坐標(biāo)系中代表著視口層面的左上角，而不是該關(guān)卡的左上角。我們也可以使用translate方法，這樣可以作用于所有元素。

這個(gè)文檔將新的顯示屏插入runGame中：

所以當(dāng)你需要在瀏覽器中繪圖時(shí)，你都可以選擇純粹的 HTML、SVG 或畫布。沒有唯一的最適合的且在所有動(dòng)畫中都是最好的方法。每個(gè)選擇都有它的利與弊。

單純的 HTML 的優(yōu)點(diǎn)是簡(jiǎn)單。它也可以很好地與文字集成使用。SVG 與畫布都可以允許你繪制文字，但是它們不會(huì)只通過一行代碼來幫助你放置text或者包裝它，在一個(gè)基于 HTML 的圖像中，包含文本塊更加簡(jiǎn)單。

SVG 可以被用來制造可以任意縮放而仍然清晰的圖像。與 HTML 相反，它實(shí)際上是為繪圖而設(shè)計(jì)的，因此更適合于此目的。

SVG 與 HTML 都會(huì)構(gòu)建一個(gè)新的數(shù)據(jù)結(jié)構(gòu)（DOM），它表示你的圖片。這使得在繪制元素之后對(duì)其進(jìn)行修改更為可能。如果你需要重復(fù)的修改在一張大圖片中的一小部分，來對(duì)用戶的動(dòng)作進(jìn)行響應(yīng)或者作為動(dòng)畫的一部分時(shí)，在畫布里做這件事情將會(huì)極其的昂貴。DOM 也可以允許我們?cè)趫D片上的每一個(gè)元素（甚至在 SVG 畫出的圖形上）注冊(cè)鼠標(biāo)事件的處理器。在畫布里則實(shí)現(xiàn)不了。

但是畫布的基于像素的方法在需要繪制大量的微小元素時(shí)會(huì)有優(yōu)勢(shì)。它不會(huì)構(gòu)建新的數(shù)據(jù)結(jié)構(gòu)而是僅僅重復(fù)的在同一個(gè)像素上繪制，這使得畫布在每個(gè)圖形上擁有更低的消耗。

有一些效果，像在逐像素的渲染一個(gè)場(chǎng)景（比如，使用光線追蹤）或者使用 javaScript 對(duì)一張圖片進(jìn)行后加工（虛化或者扭曲），只能通過基于像素的技術(shù)來進(jìn)行真實(shí)的處理。在某些情況下，你可能想要將這些技術(shù)整合起來使用。比如，你可能用 SVG 或者畫布畫出一個(gè)圖形，但是通過將一個(gè) HTML 元素放在圖片的頂端來展示像素信息。

對(duì)于一些要求低的程序來說，選擇哪個(gè)接口并沒有什么太大的區(qū)別。因?yàn)椴恍枰L制文字，處理鼠標(biāo)交互或者處理大量的元素。我們?cè)诒菊聻橛螒驑?gòu)建的顯示屏，可以通過使用三種圖像技術(shù)中的任意一種來實(shí)現(xiàn)。

在本章中，我們討論了在瀏覽器中繪制圖形的技術(shù)，重點(diǎn)關(guān)注了元素。

一個(gè)canvas節(jié)點(diǎn)代表了我們的程序可以繪制在文檔中的一片區(qū)域。這個(gè)繪圖動(dòng)作是通過一個(gè)由getContext方法創(chuàng)建的繪圖上下文對(duì)象完成的。

2D 繪圖接口允許我們填充或者拉伸各種各樣的圖形。這個(gè)上下文的fillStyle屬性決定了圖形的填充方式。strokeStyle和lineWidth屬性用來控制線條的繪制方式。

矩形與文字可以通過使用一個(gè)簡(jiǎn)單的方法調(diào)用來繪制。采用fillRect和strokeRect方法繪制矩形，同時(shí)采用fillText和strokeText方法繪制文字。要?jiǎng)?chuàng)建一個(gè)自定義的圖形，我們必須首先建立一個(gè)路徑。

調(diào)用beginPath會(huì)創(chuàng)建一個(gè)新的路徑。很多其他的方法可以向當(dāng)前的路徑添加線條和曲線。比如，lineTo方法可以添加一條直線。當(dāng)一條路徑畫完時(shí)，它可以被fill方法填充或者被stroke方法勾勒輪廓。

從一張圖片或者另一個(gè)畫布上移動(dòng)像素到我們的畫布上可以用drawImage方法實(shí)現(xiàn)。默認(rèn)情況下，這個(gè)方法繪制了整個(gè)原圖像，但是通過給它更多的參數(shù)，你可以拷貝一張圖片的某一個(gè)特定的區(qū)域。我們?cè)谟螒蛑惺褂昧诉@項(xiàng)技術(shù)，從包括許多動(dòng)作的圖像中拷貝出游戲角色的單個(gè)獨(dú)立動(dòng)作。

圖形變換允許你向多個(gè)方向繪制圖片。2D 繪制上下文擁有一個(gè)當(dāng)前的可以通過translate、scale與rotate進(jìn)行變換。這些會(huì)影響所有的后續(xù)的繪制操作。一個(gè)變換的狀態(tài)可以通過save方法來保存，通過restore方法來恢復(fù)。

在一個(gè)畫布上展示動(dòng)畫時(shí)，clearRect方法可以用來在重繪之前清除畫布的某一部分。

編寫一個(gè)程序，在畫布上畫出下面的圖形。

一個(gè)不規(guī)則四邊形（一個(gè)在一邊比較長(zhǎng)的矩形）

一個(gè)紅色的鉆石（一個(gè)矩形旋轉(zhuǎn)45度角）

一個(gè)鋸齒線

一個(gè)由 100 條直線線段構(gòu)成的螺旋

一個(gè)黃色的星星

當(dāng)繪制最后兩個(gè)圖形時(shí)，你可以參考第 14 章中的Math.cos和Math.sin的解釋，它描述了如何使用這兩個(gè)函數(shù)獲得圓上的坐標(biāo)。

建議你為每一個(gè)圖形創(chuàng)建一個(gè)方法，傳入坐標(biāo)信息，以及其他的一些參數(shù)，比如大小或者點(diǎn)的數(shù)量。另一種方法，可以在你的代碼中硬編碼，會(huì)使得你的代碼變得難以閱讀和修改。

在本章的前部分，我們看到一個(gè)繪制餅狀圖的樣例程序。修改這個(gè)程序，使得每個(gè)部分的名字可以被顯示在相應(yīng)的切片旁邊。試著找到一個(gè)合適的方法來自動(dòng)放置這些文字，同時(shí)也可以適用于其他數(shù)據(jù)。你可以假設(shè)分類大到足以為標(biāo)簽留出空間。

你可能還會(huì)需要Math.sin和Math.cos方法，像第 14 章描述的一樣。

使用在第 14 章和第 16 章出現(xiàn)的requestAnimationFrame方法畫出一個(gè)裝有彈力球的盒子。這個(gè)球勻速運(yùn)動(dòng)并且當(dāng)撞到盒子的邊緣的時(shí)候反彈。

當(dāng)進(jìn)行圖形變換時(shí)，繪制位圖圖像會(huì)很慢。每個(gè)像素的位置和大小都必須進(jìn)行變換，盡管將來瀏覽器可能會(huì)更加聰明，但這會(huì)導(dǎo)致繪制位圖所需的時(shí)間顯著增加。

在一個(gè)像我們這樣的只繪制一個(gè)簡(jiǎn)單的子畫面圖像變換的游戲中，這個(gè)不是問題。但是如果我們需要繪制成百上千的角色或者爆炸產(chǎn)生的旋轉(zhuǎn)粒子時(shí)，這將會(huì)成為一個(gè)問題。

思考一種方法來允許我們不需要加載更多的圖片文件就可以畫出一個(gè)倒置的角色，并且不需要在每一幀調(diào)用drawImage方法。