12.15學習經驗分享#
Bruce_Zhu于2016.12.15
一、Canvas - 漸變
?
canvas 畫圖必要三步
- 在body里創建好canvas標簽，并設置好id屬性
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
</pre> - 在JS里通過DOM方式得到canvas
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
</script>
</pre> - 通過.getContext()方法得到2d繪圖畫布
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
// 如果通過jQuery方式獲取到canvas時，需要將jQuery對象轉換成DOM對象
// $("#canvas")[0].getContext("2d");
// $("#canvas").get(0).getContext("2d");
// $("#canvas").eq(0)[0].getContext("2d");
var context = canvas.getContext("2d");
</script>
</pre>
?
canvas 線性漸變
在canvas線性漸變方法.createLinearGradient(x1,y1,x2,y2)中:
x1,y1 ==> 基準線的起點坐標值
x2,y2 ==> 基準線的終點坐標值
所以我們在應該如下設置參數：
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
var context = canvas.getContext("2d");
// 實現線性漸變效果
// 1.獲取漸變對象
// 后面的參數有兩種功能，設置漸變的方向，設置漸變的范圍
var grd = context.createLinearGradient(200,100,200,400);
// 2.設置漸變的顏色
grd.addColorStop(0,"red");
grd.addColorStop(0.3,"yellow");
grd.addColorStop(1,"blue");
// 3.將需要填充的顏色添加到漸變對象上
context.fillStyle = grd;
// 4.畫圖
context.fillRect(0,0,canvas.height,canvas.width);
</script>
</pre>
那么實現的效果就是如下圖：
?
canvas 徑向漸變
在canvas徑向漸變的方法.context.createRadialGradient(x1,y1,r1,x2,y2,r2)中：
x1,y1,r1 ==> 第一個（也就是覆蓋在最上方的）圓的x軸，y軸數值和半徑
x2,y2,r2 ==> 第二個（也就是被覆蓋的）圓的x軸，y軸數值和半徑
所以我們在應該如下設置參數：
<pre>
<body>
<canvas id="canvas" width="400px" height="400px" style="background: white;"></canvas>
</body>
<script>
var canvas = getElementById("canvas");
var context = canvas.getContext("2d");
// 實現漸變效果
// 1.獲取漸變對象
// 后面的參數有兩種功能，設置漸變的方向，設置漸變的范圍
var grd = context.createLinearGradient(200,100,200,400);
// 2.設置漸變的顏色
grd.addColorStop(0,"red");
grd.addColorStop(0.3,"yellow");
grd.addColorStop(1,"blue");
// 3.將漸變對象賦值給填充顏色
context.fillStyle = grd;
// 4.畫圖
context.fillRect(0,0,canvas.height,canvas.width);
</script>
</pre>
實現的效果如下圖：
二、Canvas - 繪制
?
canvas 繪制文字
1、屬性
1）與css的font屬性類似，接受值也完全相同
font2）水平對齊方式，值可以是left、right和center
textAlign //繪制文本的基準線 context.beginPath(); context.moveTo(200,0); context.lineTo(200,400); context.stroke();3）文本基線,設置垂直方向對齊,值可以是top、middle和bottom，alphabetic（默認值，字母基線）hanging（ 懸掛基線）
textBaseline注意： 無論是水平方向對齊還是垂直方向對齊，都是基準線對齊，并不是文字對齊
2、方法
1）在指定位置繪制空心文字，后面的x,y指的是左下角的坐標
strokeText(text,x,y)2）在指定位置繪制實心文字
fillText(text,x,y)3）返回指定文字的大小信息
measureText()
?
canvas 設置陰影
1、使用CSS語法聲明陰影顏色
shadowColor
2、接受一個數字，確定對象陰影的水平投射距離
shadowOffsetX
3、接受一個數字，確定對象陰影的垂直投射距離
shadowOffsetY
4、為陰影生成模糊效果
shadowBlur
?
canvas 路徑畫圖
1、標識方法
開始創建路徑，每次繪制新圖形之前，都要先重新創建一個路徑
beginPath()結束創建路徑，主要用于讓線條閉合
closePath()2、設置方法
設置矩形形狀
rect(x,y,width,height) x和y - 矩形的左上角 width/height - 矩形的寬和高設置圓形形狀
arc(x,y,radius,startAngle,endAngle,direction) x/y - 設置圓心的坐標值 radius - 圓形的半徑 startAngle - 開始位置 endAngle - 結束位置 direction - 方向：默認值為false，表示順時針
