* Canvas(畫布)
* 基本內(nèi)容
* 簡單來說,HTML5提供的新元素<canvas>
* Canvas在HTML頁面提供畫布的功能
* 在畫布中繪制各種圖形
* Canvas繪制的圖形與HTML頁面無關(guān)
* 無法通過DOM獲取繪制的圖形
* 無法為繪制的圖形綁定DOM事件
* 只能使用Canvas提供的API
* Canvas用途
* 在HTML頁面中繪制圖表(例如柱狀圖、餅狀圖等)
* 網(wǎng)頁游戲 - Flash技術(shù)
* 使用HTML5中的Canvas
* 如何使用Canvas
* 在HTML頁面中定義<canvas>元素
* 在javascript代碼中
* 獲取<canvas>元素
* 創(chuàng)建畫布對象
* getContext('2d')方法
* 使用Canvas提供的API
* 繪制圖形
* 繪制矩形
* fillRect(x,y,width,height) - 實(shí)心矩形
* x和y - 矩形的左上角坐標(biāo)值
* width - 設(shè)置矩形的寬度
* height - 設(shè)置彗星的高度
* strokeRect(x,y,width,height) - 空心矩形
* clearRect(x,y,width,height)
* 清除指定區(qū)域的矩形
* 設(shè)置顏色
* fillStyle - 設(shè)置填充顏色
* strokeStyle - 設(shè)置描邊顏色
* globalAlpha - 設(shè)置透明度(0-1)
* 設(shè)置漸變
* 線型漸變 - createLinearGradient(x1,y1,x2,y2)
* 具有基準(zhǔn)線 - 起點(diǎn)(x1,y1)和終點(diǎn)(x2,y2)
* 扇形(射線)漸變 - createRadialGradient(x1,y1,r1,x2,y2,r2)
* 具有柱形(錐形) - 兩個(gè)圓的面積
* 參數(shù)
* x1和y1 - 第一個(gè)圓的圓心坐標(biāo)值
* r1 - 第一個(gè)圓的半徑
* x2和y2 - 第二個(gè)圓的圓心坐標(biāo)值
* r2 - 第二個(gè)圓的半徑