2017年5月8日 星期一

HTML5 Canvas

下面是課程裡面最初步的code,就只是用canvas顯示一張圖出來而已
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas id="c" width="200" height="200"></canvas>
  <script>
    var c = document.querySelector("#c");
    var ctx = c.getContext("2d");
    var image = new Image();

    image.onload = function(){
      console.log("Loaded image");
      ctx.drawImage(image, 0, 0, c.width, c.height);
    }
    image.src = "222050-22rdf.jpg";
  </script>

  
</body>
</html>
view raw canvas.md hosted with ❤ by GitHub
不過對我這種javascript菜鳥還是有一些不明白的地方,我一直都不確定到底什麼東西會在什麼時候被執行
也就是我搞不清楚程式執行的順序,就會傻傻以為都上到下

 image.src = "222050-22rdf.jpg";
比方我不懂上面這個為什麼要放在onload的下面

這是一開始我心中最上面那段程式的的定義

  1. 建立image object
  2. 用onload去設定圖片讀完之後要做什麼事
  3. 用用canvas顯示在網頁上
  4. 然後最後才和他講圖片在哪裡?_?(黑人問號臉)
然後去論壇找一找有人問了類似的問題,發覺我最根本上會錯意了囧
因為,你沒有和他講圖片在哪裡之前圖片根本不會被load,所以onload根本不會執行
也就是
image.src = "222050-22rdf.jpg";本來就該放在後面啊～傻傻der~
借用一下udacity論壇上老師的解釋
// a common mistake seen, adding event after src assign:
var image = new Image();
image.src = 'image.jpg';
image.onload = function(){ 
    // won't work if image already cached, it won't trigger
    // ...
};

// correct way:
var image = new Image();
image.onload = function(){ // always fires the event.
    // ...
};
// handle failure
image.onerror = function(){

};
image.src = 'image.jpg';
view raw canvas2.md hosted with ❤ by GitHub



張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)