Akiicat 學習筆記

Canvas Usage

html canvas 簡單來說就是個 image，只是它可以使用 Javascript 來 render 你所想要的樣子，所以能操作的東西十分的多，可以拿來做動畫或是遊戲等等的，有其他的套件輔助會比較方便。

// 建立 canvas
// context 暫時沒有用到
var canvas  = document.createElement('canvas');
var context = canvas.getContext('2d');

// 設定 canvas 的大小，就像是一張圖片的大小是 800 x 400
canvas.width  = 800;
canvas.height = 400;

// css 裡的 style，用來縮放，還有很多有的沒的......
canvas.style.width  = '400px';
canvas.style.height = '300px';

Load Image From Url

用 Javascript Image 物件來建立圖片。

var img = new Image();
img.onload = function(){
  // 完整載入圖片之後才會執行這一段
};
img.src = 'http://i.imgur.com/ImageHere';

閱讀全文