1.1 convas基礎(chǔ)
1.是圖形容器（畫(huà)布），圖形通過(guò)JS繪制。默認(rèn)寬度300px，默認(rèn)高度150px，可以使用canvas屬性、css、js（通過(guò)屬性設(shè)置寬高）三種方法設(shè)置其寬高。（當(dāng)設(shè)置的寬高大于默認(rèn)寬高時(shí)，占的內(nèi)存不變，圖像會(huì)模糊）。
2.讓canvas全屏：
var mycanvas = document.getElementById("mycanvas");
mycanvas.width=document.documentElement.clientWidth;
mycanvas.height=document.documentElement.clientHeight;
3.畫(huà)布坐標(biāo)系：
左上角為原點(diǎn)（0，0），x軸向右為正，y軸向下為正。
4.得到畫(huà)布：（上下文對(duì)象）
var mycanvas=document.getElementById("mycanvas");var ctx=mycanvas.getContext("2d");
5.繪制路徑（path）
繪制步驟
（1）.創(chuàng)建畫(huà)布，并得到上下文ctx(context)
（2）.規(guī)劃路線(xiàn)
ctx.beginPath(); 表示規(guī)劃開(kāi)始（也可以是開(kāi)始新的繪制點(diǎn)）
ctx.moveTo(x,y); 表示路徑起點(diǎn)
ctx.lineTo(x,y);表示路徑到達(dá)點(diǎn)
ctx.closePath();表示起點(diǎn)與終點(diǎn)是否閉合，不調(diào)用表示不閉合
（3）.設(shè)置canvas狀態(tài)(與規(guī)劃路線(xiàn)可交換)
例:
ctx.lineWidth=5; 設(shè)置線(xiàn)寬為5px, 默認(rèn)為1px
ctx.strokeStyle="red";設(shè)置線(xiàn)色為red,默認(rèn)為black
ctx.fillStyle="blue";設(shè)置填充色,默認(rèn)是black（可以用rgba設(shè)置顏色和透明度）
狀態(tài)有很多，目前先掌握這個(gè)
（4）.會(huì)制
ctx.stroke();繪制線(xiàn)
ctx.fill();填充繪制，即當(dāng)規(guī)劃路線(xiàn)中調(diào)用了ctx.closePath();則會(huì)使用填充色填充內(nèi)部空間
說(shuō)明:fill會(huì)填充所有空間，stroke()繪制時(shí)，使用線(xiàn)是間當(dāng)前尺寸，所以當(dāng)調(diào)用了closePath()后
fill和stroke繪制的空間會(huì)有重疊，stroke與fill的執(zhí)行順序是可交換的，它們后繪制的會(huì)覆蓋前繪制的。
6.線(xiàn)段的連接點(diǎn)：lineJoin
mycanvas.lineJoin="round";圓形化
mycanvas.lineJoin="bevel";平角化
mycanvas.lineJoin="miter";尖的
（miter下可用屬性：context.miterLimit=2;限制尖叫不超過(guò)的數(shù)值）
7.canvas的帽子狀態(tài)lineCap
context.lineCap = "butt";沒(méi)有帽子
context.lineCap = "round";圓形帽子
context.lineCap = "square";方帽子
8.畫(huà)布狀態(tài)（上下文狀態(tài)）
context.save();把當(dāng)前狀態(tài)壓入棧頂
context.restore();把棧頂狀態(tài)取出，當(dāng)作當(dāng)前狀態(tài)
9.clearRect清除
context.clearRect(x,y,width,height)
x,y 是坐標(biāo)。width,height是要清除的寬高
10.畫(huà)矩形
(1)路徑繪制
（2）rect(x,y,width,height);
x,y是左上角坐標(biāo)，width，height是長(zhǎng)寬
（3）strokeRect(x,y,width,height);fillRect(x,y,width,height);
strokeRect和fillRect是把規(guī)劃和繪制集于一身。
11.畫(huà)圓弧
arc（x,y,r,startAngle,endAngle,anticlockwise）
x,y? 為圓心坐標(biāo)? ? r為圓半徑? startAngle是開(kāi)始弧度? endAngle是結(jié)束弧度? anticlockwise是繪制方向（默認(rèn)false順時(shí)針，ture是逆時(shí)針）
12..繪制二次貝塞爾曲線(xiàn)
<html>
<head>
</head>
<body>
<canvas id="myCanvas" style="border: 2px solid black;"></canvas>
var canvas = document.getElementById("myCanvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
var x0=10,y0=200;
var x1=40,y1=100;
var x2=200,y2=200;
context.beginPath();
context.moveTo(x0, y0); //起始點(diǎn)
//繪制二次貝塞爾曲線(xiàn)
context.quadraticCurveTo(x1, y1, x2, y2);
context.stroke();
context.beginPath();
context.rect(x0, y0, 10, 10);
context.rect(x1, y1, 10, 10);
context.rect(x2, y2, 10, 10);
context.fill();
</script>
</body>
</html>
13.繪制文本
<html>
<head>
</head>
<body>
<canvas id="myCanvas" style="border: 2px solid black;"></canvas>
var canvas = document.getElementById("myCanvas");
canvas.width = 220;
canvas.height = 160;
var context = canvas.getContext("2d");
ctx = canvas.getContext("2d");
ctx.font = "40px sans-serif"
ctx.fillStyle="red";
ctx.strokeStyle="green";
ctx.beginPath();
ctx.fillText("視萬(wàn)物為狗", 10, 40);
ctx.fillText("視萬(wàn)物為狗",10, 80);
ctx.strokeText("視萬(wàn)物為狗",10, 80);
ctx.strokeText("視萬(wàn)物為狗",10, 140)
</script>
</body>
</html>
14.繪制圖片
<html>
<head>
</head>
<body>
<canvas id="myCanvas" style="border: 2px solid black;"></canvas>
var canvas = document.getElementById("myCanvas");
canvas.width = 330;
canvas.height = 160;
var ctx = canvas.getContext("2d");
var img = new Image(); // 創(chuàng)建img元素
img.onload = function() {
圖片，圖片放置在畫(huà)布的X位置，圖片放置在畫(huà)布的Y位置，放置進(jìn)去的圖片大小
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = 'img/good.jpg'; // 設(shè)置圖片源地址
var girlImg = document.getElementById("girl");
girlImg.onclick = function() {
ctx.drawImage(girlImg, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
15.漸變
16.剪切drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
img要使用的圖像
sx開(kāi)始剪切的x坐標(biāo)
sy開(kāi)始剪切的y坐標(biāo)
swidth被剪切的寬度
sheight被剪切的高度
x 在畫(huà)布上放置圖片的x坐標(biāo)
y在畫(huà)布上放置圖片的y坐標(biāo)
width要使用的圖片的寬度
height要使用的圖片的高度
17.填充圖片createPattern（img，repeat）
img是圖片
repeat是 (1)repeat:平鋪x,y
(2)repeat-x:平鋪x
(3)repeat-y:平鋪y
(4)no-repeat:不平鋪
1.2JS游戲
后續(xù)添加...
