h5的canvas畫布常用方法
首先canvas是有預設的寬度和高度，不可以在CSS樣式中設定高階和寬度，否則會按照比例來縮放，一般都是在JS中設定寬度和高度；
下面用一個例子介紹；
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#303B52;
}
canvas{
background: white;
/*width: 500px;
height: 500px;*/
/*不能在這裡加，因為會預設幫你比例,因此在JS裡賦予*/
}
</style>
</head>
<body>
<canvas id="bd">
<span>sf</span>
</canvas>
</body>
<script>
var sg=document.querySelector('#bd');
sg.width=400;
sg.height=400;
var ge=sg.getContext('2d');
//繪製矩形
ge.fillStyle='red'; //填充顏色
ge.fillRect(50,50,100,100); //x y軸座標 寬度 高度 預設黑色
ge.strokeStyle='blue';//邊框的顏色
ge.lineWidth='5'; //邊框的大小
ge.strokeRect(50.5,50.5,100,100); //邊框
//繪製路徑
ge.beginPath();//開始執行
ge.moveTo(100,100); //開始的位置
ge.lineTo(200,200);//第二個位置
ge.lineTo(150,300);//第三個位置
ge.closePath();//起點到終點的連線閉合
ge.stroke();//繪製一條線
ge.lineWidth='5'; //邊框的大小
ge.strokeStyle='brown';//邊框的顏色
ge.lineCap='round'; //線的斷點樣式,round為圓角,spuare 出來的長度為寬度一半10px。
//繪製圓形
制圓弧（arc）（重點）
· 概述：arc() 方法建立弧/曲線（用於建立圓或部分圓）。
o 語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
o 解釋：
x,y：圓心座標。
r：半徑大小。
sAngle:繪製開始的角度。 圓心到最右邊點是0度，順時針方向弧度增大。
eAngel:結束的角度，注意是弧度。π
counterclockwise：是否是逆時針。true是逆時針，false：順時針
弧度和角度的轉換公式： rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度
ge.arc(200,200,150,0,-360*Math.PI/180,true);
ge.stroke(); 連成線
ge.moveTo(200,200);
ge.arc(200,200,150,90*Math.PI/180,90*Math.PI/180,false);
ge.stroke(); 連成線
var grd=ge.createLinearGradient(150,100,150,300); //起點座標 終點座標
grd.addColorStop(0,'red'); //位置和顏色
grd.addColorStop(0.5,'green');
grd.addColorStop(1,'blue');
ge.fillStyle=grd;
ge.fillRect(100,100,200,200);
//文字
ge.fillStyle='red';//內容顏色
ge.lineWidth=2;//描邊大小
ge.strokeStyle='blue';//改變描邊顏色
ge.font='60px 宋體';//改變樣式
ge.textBaseline='top';//改變基點
ge.fillText('文字在幹嗎',0,0);//填寫內容 座標位置
ge.strokeText('文字',0,0);//描邊 填寫哪個就描邊哪個 座標位置
ge.shadowOffsetX=10; //x軸座標
ge.shadowOffsetY=10; //y軸座標
ge.shadowBlur=1; //模糊寬度
ge.shadowColor='#d8d8d8'; //模糊顏色
3.4 變換（重點）
3.4.1 縮放（重點）
Ø scale() 方法縮放當前繪圖，更大或更小
Ø 語法：context.scale(scalewidth,scaleheight)
n scalewidth : 縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
n scaleheight : 縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)
Ø 注意：縮放的是整個畫布，縮放後，繼續繪製的圖形會被放大或縮小。
3.4.2 位移畫布（重點）
Ø translate() 方法重新對映畫布上的 (0,0) 位置
Ø 語法：context.translate(x,y)
n x： 新增到水平座標（x）上的值
n y： 新增到垂直座標（y）上的值
Ø 注意：發生位移後，相當於把畫布的0,0座標 更換到新的x,y的位置，所有繪製的新元素都被影響。
3.4.3 旋轉（重點）
Ø rotate() 方法旋轉當前的繪圖
Ø 語法：context.rotate(angle)
n angle： 引數是弧度（PI）
注意：如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算。
3.4.4 繪製環境儲存和還原（重要）
Ø context.save() 儲存當前環境的狀態（可以把當前繪製環境進行儲存到快取中）
Ø context.restore() 返回之前儲存過的路徑狀態和屬性(獲取最近快取的ctx)
注意：一般配合位移畫布使用。
3.4.5 設定繪製環境的透明度（瞭解）
Ø context.globalAlpha=number;
n number:透明值。必須介於 0.0（完全透明)與 1.0（不透明） 之間。
注意：設定透明度是全域性的透明度的樣式。注意是全域性的。
</script>
</html>