1.1 convas基础
1.是图形容器（画布），图形通过JS绘制。默认宽度300px，默认高度150px，可以使用canvas属性、css、js（通过属性设置宽高）三种方法设置其宽高。（当设置的宽高大于默认宽高时，占的内存不变，图像会模糊）。
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）.创建画布，并得到上下文ctx(context)
（2）.规划路线
ctx.beginPath(); 表示规划开始（也可以是开始新的绘制点）
ctx.moveTo(x,y); 表示路径起点
ctx.lineTo(x,y);表示路径到达点
ctx.closePath();表示起点与终点是否闭合，不调用表示不闭合
（3）.设置canvas状态(与规划路线可交换)
例:
ctx.lineWidth=5; 设置线宽为5px, 默认为1px
ctx.strokeStyle="red";设置线色为red,默认为black
ctx.fillStyle="blue";设置填充色,默认是black（可以用rgba设置颜色和透明度）
状态有很多，目前先掌握这个
（4）.会制
ctx.stroke();绘制线
ctx.fill();填充绘制，即当规划路线中调用了ctx.closePath();则会使用填充色填充内部空间
说明:fill会填充所有空间，stroke()绘制时，使用线是间当前尺寸，所以当调用了closePath()后
fill和stroke绘制的空间会有重叠，stroke与fill的执行顺序是可交换的，它们后绘制的会覆盖前绘制的。
6.线段的连接点：lineJoin
mycanvas.lineJoin="round";圆形化
mycanvas.lineJoin="bevel";平角化
mycanvas.lineJoin="miter";尖的
（miter下可用属性：context.miterLimit=2;限制尖叫不超过的数值）
7.canvas的帽子状态lineCap
context.lineCap = "butt";没有帽子
context.lineCap = "round";圆形帽子
context.lineCap = "square";方帽子
8.画布状态（上下文状态）
context.save();把当前状态压入栈顶
context.restore();把栈顶状态取出，当作当前状态
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是把规划和绘制集于一身。
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(); // 创建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游戏
后续添加...
