其實(shí)canvas本身很簡(jiǎn)單，就是去學(xué)習(xí)它的API，多看實(shí)例，多自己動(dòng)手練習(xí)，多總結(jié)。但是canvas的API實(shí)在是有點(diǎn)多，對(duì)于初學(xué)者來說，可能學(xué)到一半就止步不前了。我也有這種感覺，在學(xué)習(xí)的過程中，編寫實(shí)例，用到了其中很多的屬性和方法，但是回頭來看的時(shí)候總覺得什么也沒用。所以決定系統(tǒng)性的記錄一下它常用到的API，方便以后查閱，也順便造福一下大家。
另外：附一個(gè)之前學(xué)習(xí)的時(shí)候自己跟著教程寫的一個(gè)小游戲：tinyHeart小游戲
開始之前
假設(shè)html代碼中有一個(gè)canvas標(biāo)簽：
<canvas id="canvas">你的瀏覽器不支持canvas！</canvas>
如果你的瀏覽器是IE8及以下，那么很遺憾，上面那段文字會(huì)被渲染出來！而且下面的方法也都不能使用了；所以請(qǐng)使用支持canvas的瀏覽器來使用后面的方法。
//獲取canvas容器var can = document.getElementById(‘canvas’);//創(chuàng)建一個(gè)畫布var ctx = can.getContext(‘2d’);
另外我們可以還可以得到容器的寬和高度
var canWid = can.width; //canvas 的寬度var canHei = can.height; //canvas 的高度
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式