canvas
html5的一個新標簽糯而，新功能相當?shù)膹姶螅阅苁呛陀脩舻碾娔X相關的泊窘，不在一來瀏覽器熄驼。
行級標簽
雙標簽
為了防止低版本的瀏覽器不支持，我們可以在標簽內(nèi)添加一些對用戶說說出的話 對不起....
不能用style樣式來控制canvas的寬高烘豹，這樣會使其按照比例放大瓜贾，是內(nèi)部圖形變形。
canvas的默認寬高是 300*150
canvas是通過js來控制的
現(xiàn)需要獲取到canvas元素
然后獲取到他的上上下文 進行這種操作 var context = canvas.getContext("2d");
先來幾個簡單的函數(shù)
context.moveTo（x携悯，y） 將畫筆移動到哪一個坐標
context.lineTo（x祭芦，y）畫線從起始位置向什么位置畫線
context.stroke() 將上上述的操作畫到畫布上去 只有邊框
context.strokestyle = "red" 設置線的顏色
context.fill（）也是畫到畫布上，但是會填充內(nèi)容
context.fillstyle = "red" 設置填充的顏色
context.fillRect(i,j,100,100); 畫矩形的函數(shù) 參數(shù) 其實位置的坐標 矩形的寬和高 并填充到畫布上
context.arc(400,400,300,Math.PI0.5,Math.PI1.5,true);
畫圓的方法 參數(shù) 圓心的坐標 圓的半徑 圓的開始畫的位置憔鬼，圓的結束的位置龟劲，順時針還是逆時針 true是逆時針 默認是逆時針
漸變
1.線性漸變
context.createLinearGradient(0,0,800,800);// 線性漸變
參數(shù)： 漸變的其實下標，漸變的終止下標
gra.addColorStop(1,"red"); 添加漸變色
漸變是兩個坐標之間的變化轴或，其實是把兩個坐標之間的距離等分為0到1昌跌，通過設置0-1的不同的顏色就可以實現(xiàn)色彩斑斕的線性漸變
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
var gra = context.createLinearGradient(0,0,800,800);// 線性漸變
gra.addColorStop(0,"yellow");
gra.addColorStop(0.5,"blue");
gra.addColorStop(1,"red");
context.fillStyle = gra;
context.fillRect(0,0,canvas.width,canvas.height);
2.徑向漸變
context.createRadialGradient(200,200,20,200,200,200);
徑向漸變比縣線性漸變多了兩個參數(shù)，分別是其實位置的半徑照雁，和終止位置的半徑
canvas里面的添加文字
context.fillText("胖虎",100,100); 添加文字的方法
參數(shù) 文字內(nèi)容蚕愤，文字添加的位置 默認是 文字的左下角為指定的坐標
context.textBaseline = "middle"; 設置文字在豎直方向上的居中
context.textAlign = "center"; 設置文字在水平方向上的居中
設置了上面兩個參數(shù)之后，干菜我們設置的坐標就在文字的正中間了
字體的設置
context.font = "bold 50px Arial"; // 設置字的大小必須給字體
參數(shù) 字體的font.weight 字體的字號 設置為什么字體
