Canvas繪制文字
1、屬性
1）與css的font屬性類似，接受值也完全相同
font context.font = "20px red 微軟雅黑";
2）水平對齊方式，值可以是left、right和center
textAlign
textAlign居中方式
1.繪制文本的區(qū)域，就是文本所占的那一塊區(qū)域。假如一個文本所用的區(qū)域是20*20，此時居中來說對該文本沒有任何意義。所以此時的居中并不是針對文字而是針對基線
2.如果是向右居中，邏輯如下
1）在緊挨文本的左側畫一條豎直方向的線
2）移動文本，讓線處于文本的右邊
3）其他水平居中方式同理
繪制文本的基準線
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創(chuàng)建路徑，繪制矩形和圓
1、標識方法
開始創(chuàng)建路徑，每次繪制新圖形之前，都要先重新創(chuàng)建一個路徑
beginPath()
結束創(chuàng)建路徑，主要用于讓線條閉合
closePath()
直接繪制圖形和用路徑繪制圖形的區(qū)別
直接繪制不需要調用beginPath()
使用路徑繪制必須調用beginPath()
fillRect() => rect()+fill()
2、設置方法
設置矩形形狀
rect(x,y,width,height)
x和y - 矩形的左上角
width/height - 矩形的寬和高
設置圓形形狀
arc(x,y,radius,startAngle,endAngle,direction)
x/y - 設置圓心的坐標值
radius - 圓形的半徑
startAngle - 開始位置 使用角度
endAngle - 結束位置 使用角度 Math.PI
direction - 方向：默認值為false，表示順時針,true表示逆時針
3、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//創(chuàng)建路徑和繪制同時執(zhí)行
context.fillRect(0,0,100,100);
/*
使用路徑來創(chuàng)建圖形
注意：只要單獨使用路徑，就要使用beginPath()方法
*/
//初始化路徑
context.beginPath();
//繪制路徑
context.rect(100,120,200,100);
context.fillStyle = "yellow"
context.stroke();//context.fill();
context.beginPath();
context.rect(100,300,100,100);
context.fillStyle = "red"
context.fill();
context.beginPath();
/*
* arc
* arc(x,y,radius,startAngle,endAngle,direction)
* x,y 原點位置
* radius 半徑
* startAngle,endAngle 開始和結束角度
* direction false代表順時針 true代表逆時針
*/
context.arc(160,60,50,0,Math.PI/2,true);
context.fillStyle = "yellow";
//閉合路徑
context.closePath()
context.stroke();
</script>
</body>
</html>
效果圖.png
