1. 程式人生 > >HTML5 Canvas 教程:七、影象

HTML5 Canvas 教程:七、影象

七、影象 Images

7.1繪製圖像 Draw Image

為了使用HTML5畫布繪製圖像,可以使用drawImage()方法,該方法需要一個影象物件和一個目標點。目標點定義影象左上角相對於畫布左上角的座標值。

因為drawImage()方法需要影象物件作為引數,所以要首先建立一個影象,並在呼叫drawImage()方法之前將其載入。可以通過使用影象物件的onload屬性來實現這一點。

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 

0px;

        padding: 0px;

      }

    </style>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="400"></canvas>

    <script>

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

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

      var imageObj = 

new Image();

      imageObj.onload = function() {

        context.drawImage(imageObj, 6950);

      };

      imageObj.src = 'darth-vader.jpg';

    </script>

  </body>

</html>

以上程式碼演示了在畫布上繪製一張圖片。

7.2圖片尺寸 Image Size

若要使用HTML5畫布設定影象的大小,可以再向drawImage()方法傳入兩個附加引數:寬度width和高度height。

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

    <script>

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

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

      var x = 188;

      var y = 30;

      var width = 200;

      var height = 137;

      var imageObj = new Image();

      imageObj.onload = function() {

        context.drawImage(imageObj, x, y, width, height);

      };

      imageObj.src = 'darth-vader.jpg';

    </script>

  </body>

</html>

以上程式碼演示了再畫布上繪製圖片,並改變圖片的原始尺寸。

7.3影象裁減 Image Crop

要使用HTML5 Canvas裁剪影象,我們可以向drawImage()方法新增六個附加引數,sourceX、sourceY、sourceWidth、sourceHeight、destWidth和destHeight。這些引數定義了要從影象中剪切出的矩形的位置和大小。

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

    <script>

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

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

      var imageObj = new Image();

      imageObj.onload = function() {

        // draw cropped image

        var sourceX = 150;

        var sourceY = 0;

        var sourceWidth = 150;

        var sourceHeight = 150;

        var destWidth = sourceWidth;

        var destHeight = sourceHeight;

        var destX = canvas.width / 2 - destWidth / 2;

        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceXsourceYsourceWidth

            sourceHeightdestXdestYdestWidthdestHeight);

      };

      imageObj.src = 'darth-vader.jpg';

    </script>

  </body>

</html>

以上程式碼演示了從原始圖片中裁減出一部分,並繪製在畫布上。

7.4影象載入器 Image Loader

當HTML5畫布應用程式需要多個影象時,在畫布上繪製之前載入所有影象通常是個好主意。為了簡化載入過程,可以方便地使用影象載入器函式,該函式接受影象源的雜湊,建立影象的雜湊,然後在載入了所有影象時呼叫使用者定義的函式。

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

    <script>

      function loadImages(sourcescallback) {

        var images = {};

        var loadedImages = 0;

        var numImages = 0;

        // get num of sources

        for(var src in sources) {

          numImages++;

        }

        for(var src in sources) {

          images[src] = new Image();

          images[src].onload = function() {

            if(++loadedImages >= numImages) {

              callback(images);

            }

          };

          images[src].src = sources[src];

        }

      }

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

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

      var sources = {

        darthVader: 'darth-vader.jpg',

        yoda: 'yoda.jpg'

      };

      loadImages(sources, function(images) {

        context.drawImage(images.darthVader, 10030200137);

        context.drawImage(images.yoda, 3505593104);

      });

    </script>

  </body>

</html>

以上程式碼演示了通過圖片載入器載入圖片,建立圖片物件、繫結圖片載入事件,並儲存在圖片陣列中。當圖片載入成功時裁切並在畫布上繪製圖片。