Canvas的基本介紹和使用

canvas可以做什麼？

做遊戲：白鷺引擎、trees……
動畫
圖表、頻譜
畫圖

HTML5 不止是單純的 HTML
本身是一個標籤<canvas></canvas>，默認是300*150的寬高，本身就具有寬高的屬性，不需要使用css去設置
css裏面設置的寬高一定要和canvas的寬高一致，否則繪製出來的內容就是變形的

<canvas></canvas>是一個空白的畫布
如果希望畫布上面有內容，需要通過js來繪製->通過畫布的上下文(也類似舞臺)進行繪製

使用canvas

1.創建空白畫布
2.獲得畫布的上下文
3.繪製的準備(畫筆的寬、顏色、所需的資源)
4.開始繪製

HTMLCanvasElement

var canvasELe=document.getElementById('box');
    //設置全屏
    canvasELe.width = innerWidth;
    canvasELe.height = innerHeight;

方法：
getContext(inDOMString contextID)可以傳2d或者experimental-webgl(圖形圖畫處理)

toDataURL()->把canvas對象轉成URL->生成帶有繪製內容的一個資源鏈接地址

CanvasRenderingContext2D
提供了繪製、設置繪製內容的方法屬性

屬性：
fillstyle：設置填充的樣式
strokestyle：設置輪廓的樣式
linewidth：設置筆畫的寬度
Canva：獲得畫布的DOM元素
lineCap：設置畫筆結束位置的形狀

方法：
fillRect(x,y,w,h)：繪製矩形的方法
moveTo(x,y)：擡起筆要落到哪個位置
lineTo(x,y)：畫線到某個點
stroke(不傳||path2D)：繪製
beginPath：標識 要開始一個路徑
closePath：標識要結束的路徑 閉合開始點和結束點
clearReact()：清除矩形範圍之內的內容
createLinearGradient()：線性漸變->canvasGradient
strokeText(text,x,t,maxwidth)：繪製文字
arc(x, y, radius, startAngle, endAngle, anticlockwise)：繪製弧線
x,y原點 radius半徑，起始和結束的角度，是否是逆時針
bezierCurveTo(參考點1x，參考點1y，參考點2x，參考點2y，終點x，終點y)：繪製貝塞爾曲線
Scale(x,y)：放大縮小 不會影響到畫布本身，縮放的是畫裏面的內容（讓畫布裏面的單位進行縮放）
Save()：保存畫布上面之前的樣式（畫筆寬度、顏色、變形、樣式）
Restore()：還原畫布上面之前保存的樣式
Translate()：以畫布的原點(0,0)爲參考;
Rotate(angle)：旋轉 角度->弧度計算：PI/180*角度->弧度

canvas動畫的實現;

1.通過不斷地刷新convas裏面的內容 實現動畫
2.清除上一次canvas裏面的內容

CanvasGradient：
設置canvas裏面顏色漸變的類
可以通過設置顏色的方式(fillstyle/strokeStyle)去設置漸變的對象
方法：
addColorStop(offset(0-1),color)
可以多次調用