沒接觸canvas的時候總感覺好難扎谎，接觸canvas之后感覺還行桂躏，其實(shí)挺簡單的钻趋。其實(shí)學(xué)習(xí)前端沒有什么難的，只要我們想剂习，我們就可以會蛮位。我始終相信 過分的自戀就是簡單的自信，簡單的自信可以讓自己變得陽光鳞绕。加油失仁！
canvass是HTMl5的新標(biāo)簽，和其他的demo一樣 擁有自己的屬性们何，方法 以及事件萄焦，其中最重要的是繪圖方法。js能夠用它進(jìn)行繪圖冤竹。
注：canvas的寬高是以屬性的形式設(shè)置拂封。 而不是css
context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是：
var context = canvas.getContext('2d');
canvas 元素繪制圖像的時候有兩種方法 ：
context.fill() 填充鹦蠕；
context.stroke() 繪制邊框冒签；
style ： 在進(jìn)行圖像繪制前 設(shè)置好繪圖的樣式；
context.fillStyle = '樣式'钟病； 填充的樣式萧恕；
context.strokeStyle = ‘樣式’ 邊框的樣式；
context肠阱。lineWidth 圖形邊框的寬度廊鸥；
繪制：
繪制一條線段；
<canvas width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
//繪制線段
function line(){
context.beginPath(); //開始一條路徑
context.strokeStyle = 'blue'; // 設(shè)置顏色
context.lineWidth = '5'; // 設(shè)置寬度
context.moveTo(20,100); // 線段的起始點(diǎn)
context.lineTo(200,100); // 線段的結(jié)束點(diǎn)
context.stroke(); // 繪制方法 進(jìn)行繪制
context.closePath(); // 結(jié)束一條路徑
}
line();
</script>
</body>```
樣式：
設(shè)置兩端的樣式：
```context.lineCap ： but（平的 默認(rèn)） || round （圓角） || square （方角）辖所；```
>繼續(xù)添加線段
在context.lineTo 后添加 語句：
在上一個結(jié)束點(diǎn)之后加上：
contex.lineTo(X,y);
當(dāng)拐彎的時候有一個拐角 我們同樣可以設(shè)置他的樣式；
context.lineJoin = 'round(圓角)' || 'miter（尖角）' || 'bevel（斜角）'
繪制矩形：
兩種方法：
>（1）context.rect（矩形起點(diǎn)的橫坐標(biāo)磨德，矩形起點(diǎn)的縱坐標(biāo)缘回，矩形的寬度，矩形的高度）典挑；
（2）context.fillRect矩形起點(diǎn)的橫坐標(biāo)酥宴，矩形起點(diǎn)的縱坐標(biāo)，矩形的寬度您觉，矩形的高度）拙寡；
矩形
```function demo2() {
ctx.beginPath();
ctx.strokeStyle = 'yellow';
ctx.lineWidth = '5';
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
}
demo2();
矩形
function demo3() {
ctx.strokeRect(150,150,120,120);
//ctx.fillRect(150,150,120,120);
ctx.strokeStyle = 'green';
ctx.lineWidth = '5';
}
demo3();```
清除矩形區(qū)域： context。clearRect(清除矩形起點(diǎn)的橫坐標(biāo)琳水，清除矩形起點(diǎn)的縱坐標(biāo)肆糕，清除矩形的寬度般堆，清除矩形的高度)；
可以實(shí)現(xiàn)這種效果：
繪制圓弧/圓形
```context.arc(x,y,start,end,gradient);
context.arc（圓心的X坐標(biāo)诚啃，圓心的Y坐標(biāo)淮摔，開始的角度，結(jié)束的角度始赎，方向）和橙；```
開始的角度是在 三點(diǎn)中的位置；
注：每次繪制圖像的時候 前后加 context造垛。beginPath() 以及 context.closePath（）魔招；
>線性漸變：
var lg = context。createLinearGradient(漸變開始的x坐標(biāo)五辽，漸變開始的y坐標(biāo)办斑，漸變結(jié)束的X坐標(biāo)，漸變結(jié)束的Y坐標(biāo))奔脐；
圓形漸變：
var grd = context俄周。createRadialGradient(發(fā)散開始的圓心的X坐標(biāo)， 發(fā)散開始的圓心Y坐標(biāo)髓迎，發(fā)散開始的圓的半徑峦朗，發(fā)散結(jié)束圓心的x坐標(biāo)，發(fā)散結(jié)束圓心的y坐標(biāo)排龄，發(fā)散結(jié)束圓的半徑)波势；
```//線性漸變 // 圓形漸變
function demo2(){
ctx.beginPath();
// var lg = ctx.createLinearGradient(0,100,300,200); //線性漸變
var lg = ctx.createRadialGradient(150,150,20,150,150,100,150,150,150); //參數(shù) 圓心坐標(biāo) 半徑 漸變的第二個圓的圓心
lg.addColorStop(0,'red');
lg.addColorStop(0.5,'green');
lg.addColorStop(1,'blue');
ctx.fillStyle = lg;
// ctx.fillRect(10,50,350,80);
ctx.arc(150,150,100,0,2*Math.PI,false); //圓心坐標(biāo) 半徑 起始角度 終點(diǎn)角度 true 順時針 false 逆時針
// ctx.stroke();
ctx.fill();
ctx.closePath();
}
demo2();```
圖形變形：
1.平移：context。translate（x,y）橄维；
2.縮放：context尺铣。scale（x,y）;
3.旋轉(zhuǎn)：context。rotate（角度）争舞；
繪制圖像：
context凛忿。drawImage（圖片，圖片左上頂點(diǎn)的x坐標(biāo)竞川，圖片左上頂點(diǎn)y坐標(biāo)店溢，矩形區(qū)域的寬度截取圖片的寬度，矩形區(qū)域的高度 截取圖片的高度委乌，畫在canvas上面的x坐標(biāo)床牧，畫在canvas上面的y坐標(biāo)，畫出來的寬度遭贸，畫出來的寬度戈咳，畫出來的高度，）
context。drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
>sx,sy,sw,sh, 是截取圖片的過程著蛙；
dx,dy,dw,dh 吧圖片放在canvas的過程;
未完待續(xù)删铃。。册踩。