1.1 convas基礎
1.是圖形容器（畫布）筒繁，圖形通過JS繪制棺棵。默認寬度300px，默認高度150px阎姥，可以使用canvas屬性迎罗、css览闰、js（通過屬性設置寬高）三種方法設置其寬高加矛。（當設置的寬高大于默認寬高時塞耕，占的內(nèi)存不變，圖像會模糊）程癌。
2.讓canvas全屏：
var mycanvas = document.getElementById("mycanvas");
mycanvas.width=document.documentElement.clientWidth;
mycanvas.height=document.documentElement.clientHeight;
3.畫布坐標系：
左上角為原點（0，0）轴猎，x軸向右為正嵌莉，y軸向下為正。
4.得到畫布：（上下文對象）
var mycanvas=document.getElementById("mycanvas");var ctx=mycanvas.getContext("2d");
5.繪制路徑（path）
繪制步驟
（1）.創(chuàng)建畫布捻脖，并得到上下文ctx(context)
（2）.規(guī)劃路線
ctx.beginPath(); 表示規(guī)劃開始（也可以是開始新的繪制點）
ctx.moveTo(x,y); 表示路徑起點
ctx.lineTo(x,y);表示路徑到達點
ctx.closePath();表示起點與終點是否閉合锐峭，不調(diào)用表示不閉合
（3）.設置canvas狀態(tài)(與規(guī)劃路線可交換)
例:
ctx.lineWidth=5; 設置線寬為5px, 默認為1px
ctx.strokeStyle="red";設置線色為red,默認為black
ctx.fillStyle="blue";設置填充色,默認是black（可以用rgba設置顏色和透明度）
狀態(tài)有很多，目前先掌握這個
（4）.會制
ctx.stroke();繪制線
ctx.fill();填充繪制可婶，即當規(guī)劃路線中調(diào)用了ctx.closePath();則會使用填充色填充內(nèi)部空間
說明:fill會填充所有空間沿癞，stroke()繪制時，使用線是間當前尺寸矛渴，所以當調(diào)用了closePath()后
fill和stroke繪制的空間會有重疊椎扬，stroke與fill的執(zhí)行順序是可交換的，它們后繪制的會覆蓋前繪制的具温。
6.線段的連接點：lineJoin
mycanvas.lineJoin="round";圓形化
mycanvas.lineJoin="bevel";平角化
mycanvas.lineJoin="miter";尖的
（miter下可用屬性：context.miterLimit=2;限制尖叫不超過的數(shù)值）
7.canvas的帽子狀態(tài)lineCap
context.lineCap = "butt";沒有帽子
context.lineCap = "round";圓形帽子
context.lineCap = "square";方帽子
8.畫布狀態(tài)（上下文狀態(tài)）
context.save();把當前狀態(tài)壓入棧頂
context.restore();把棧頂狀態(tài)取出蚕涤，當作當前狀態(tài)
9.clearRect清除
context.clearRect(x,y,width,height)
x,y 是坐標。width,height是要清除的寬高
10.畫矩形
(1)路徑繪制
（2）rect(x,y,width,height);
x,y是左上角坐標铣猩，width揖铜，height是長寬
（3）strokeRect(x,y,width,height);fillRect(x,y,width,height);
strokeRect和fillRect是把規(guī)劃和繪制集于一身。
11.畫圓弧
arc（x,y,r,startAngle,endAngle,anticlockwise）
x,y? 為圓心坐標? ? r為圓半徑? startAngle是開始弧度? endAngle是結束弧度? anticlockwise是繪制方向（默認false順時針达皿，ture是逆時針）
12..繪制二次貝塞爾曲線
<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); //起始點
//繪制二次貝塞爾曲線
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("視萬物為狗", 10, 40);
ctx.fillText("視萬物為狗",10, 80);
ctx.strokeText("視萬物為狗",10, 80);
ctx.strokeText("視萬物為狗",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() {
圖片天吓，圖片放置在畫布的X位置贿肩，圖片放置在畫布的Y位置，放置進去的圖片大小
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = 'img/good.jpg'; // 設置圖片源地址
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開始剪切的x坐標
sy開始剪切的y坐標
swidth被剪切的寬度
sheight被剪切的高度
x 在畫布上放置圖片的x坐標
y在畫布上放置圖片的y坐標
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ù)添加...
