canvas的學習

1、canvas簡介
​ <canvas> 是 HTML5 新增的，一個可使用腳本(一般爲JavaScript)在其中繪製圖像的 HTML 元素。它能夠用來製做照片集或者製做簡單(也不是那麼簡單)的動畫，甚至能夠進行實時視頻處理和渲染。

​ 它最初由蘋果內部使用本身MacOS X WebKit推出，供應用程序使用像儀表盤的構件和 Safari 瀏覽器使用。 後來，有人經過Gecko內核的瀏覽器 (尤爲是Mozilla和Firefox)，Opera和Chrome和超文本網絡應用技術工做組建議爲下一代的網絡技術使用該元素。

​ Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼能夠訪問該區域，相似於其餘通用的二維API，經過一套完整的繪圖函數來動態生成圖形。

​ Mozilla 程序從 Gecko 1.8 (Firefox 1.5)開始支持 <canvas>, Internet Explorer 從IE9開始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。

2、Canvas基本使用
2.1 <canvas>元素
<canvas id="tutorial" width="300" height="300"></canvas>
1
​ <canvas>看起來和<img>標籤同樣，只是 <canvas> 只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。

​ 若是不給<canvas>設置widht、height屬性時，則默認 width爲300、height爲150,單位都是px。也可使用css屬性來設置寬高，可是如寬高屬性和初始比例不一致，他會出現扭曲。因此，建議永遠不要使用css屬性來設置<canvas>的寬高。

替換內容

​ 因爲某些較老的瀏覽器（尤爲是IE9以前的IE瀏覽器）或者瀏覽器不支持HTML元素<canvas>，在這些瀏覽器上你應該老是能展現替代內容。

​ 支持<canvas>的瀏覽器會只渲染<canvas>標籤，而忽略其中的替代內容。不支持 <canvas> 的瀏覽器則 會直接渲染替代內容。

用文本替換：

原文：https://blog.csdn.net/u012468...