為了研究pixi庫，就順帶從頭到位學習下canvas吧
判斷支持力度
var webgl = (function() { try { var canvas = document.createElement('canvas'); return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')); } catch (e) { return false; } })();
getContext方法指定參數2d，表示該canvas對象用於生成2D圖案（即平面圖案）。如果參數是3d，就表示用於生成3D圖像（即立體圖案），這部分實際上單獨叫做WebGL API
繪制路徑
- beginPath方法表示開始繪制路徑
- moveTo(x, y)方法設置線段的起點
- lineTo(x, y)方法設置線段的終點
- stroke方法用來給透明的線段着色
////////// //繪制路徑 // ////////// context.beginPath() context.moveTo(20, 20) context.lineTo(30, 30) context.moveTo(100, 150) context.lineTo(150, 200) context.lineWidth = 2 context.strokeStyle = "red" context.stroke()
繪制矩形
- fillRect(x, y, width, height)方法用來繪制矩形，它的四個參數分別為矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高。fillStyle屬性用來設置矩形的填充色
- strokeRect方法與fillRect類似，用來繪制空心矩形
- clearRect方法用來清除某個矩形區域的內容
////////// //繪制路徑 // ////////// context.beginPath() context.moveTo(20, 20) context.lineTo(30, 30) context.moveTo(100, 150) context.lineTo(150, 200) context.lineWidth = 2 context.strokeStyle = "red" context.stroke()
繪制文本
- fillText(string, x, y) 用來繪制文本，它的三個參數分別為文本內容、起點的x坐標、y坐標。使用之前，需用font設置字體、大小、樣式（寫法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來添加空心字
- fillText方法不支持文本斷行，即所有文本出現在一行內。所以，如果要生成多行文本，只有調用多次fillText方法。
////////// //繪制路徑 // ////////// context.beginPath() context.moveTo(20, 20) context.lineTo(30, 30) context.moveTo(100, 150) context.lineTo(150, 200) context.lineWidth = 2 context.strokeStyle = "red" context.stroke()
繪制圓形和扇形
arc方法用來繪制扇形
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
arc方法
- x和y參數是圓心坐標
- radius是半徑
- startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示）
- anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）
////////// //繪制路徑 // ////////// context.beginPath() context.moveTo(20, 20) context.lineTo(30, 30) context.moveTo(100, 150) context.lineTo(150, 200) context.lineWidth = 2 context.strokeStyle = "red" context.stroke()
設置漸變色
createLinearGradient方法用來設置漸變色。
createLinearGradient方法的參數是(x1, y1, x2, y2)，其中x1和y1是起點坐標，x2和y2是終點坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。
///////// //漸變色 // ///////// var myGradient = context.createLinearGradient(0, 0, 0, 60); myGradient.addColorStop(0, "#BABABA"); myGradient.addColorStop(1, "#636363"); context.fillStyle = myGradient; context.fillRect(10,250,200,100);
設置陰影
///////// //漸變色 // ///////// var myGradient = context.createLinearGradient(0, 0, 0, 60); myGradient.addColorStop(0, "#BABABA"); myGradient.addColorStop(1, "#636363"); context.fillStyle = myGradient; context.fillRect(10,250,200,100);