沒接觸canvas的時(shí)候總感覺好難，接觸canvas之后感覺還行，其實(shí)挺簡(jiǎn)單的。其實(shí)學(xué)習(xí)前端沒有什么難的，只要我們想，我們就可以會(huì)。我始終相信 過分的自戀就是簡(jiǎn)單的自信，簡(jiǎn)單的自信可以讓自己變得陽光。加油！
canvass是HTMl5的新標(biāo)簽，和其他的demo一樣 擁有自己的屬性，方法 以及事件，其中最重要的是繪圖方法。js能夠用它進(jìn)行繪圖。
注：canvas的寬高是以屬性的形式設(shè)置。 而不是css
context是一個(gè)封裝了很多繪圖功能的對(duì)象，獲取這個(gè)對(duì)象的方法是：
var context = canvas.getContext('2d');
canvas 元素繪制圖像的時(shí)候有兩種方法 ：
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 后添加 語句：
在上一個(gè)結(jié)束點(diǎn)之后加上：
contex.lineTo(X,y);
當(dāng)拐彎的時(shí)候有一個(gè)拐角 我們同樣可以設(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)中的位置；
注：每次繪制圖像的時(shí)候 前后加 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) 半徑 漸變的第二個(gè)圓的圓心
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 順時(shí)針 false 逆時(shí)針
// 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ù)。。。