研究html5 canvas制作简易动画
初学canvas，都是一些我在学习中的一下自我理解的教程。
目录
1. canvas前期的准备2. canvas基础的一些功能3. canvas动画效果4. 参考资料
效果：
canvas前期的准备：
1. 首先要在html中创建一个canvas标签。
2. 在js里，首先需要定义这个canvas元素，在创建`context`对象，为了调用`context`对象里的方法。
3. `context`对象里有很多方法，大家可以用打印出来，对应开发文档查看已经含义，因为属性过度，我在这里不一一列举出来。
前期的准备工作完成，让我们开始正题吧。
canvas基础的一些功能
1. 绘制纯色矩形 // 在画布里填充一个颜色为黑色,距左10 距上20 宽度400 高度100 的矩形。 // context.fillStyle=color|gradient|pattern; // CSS 颜色值。默认值是 #000000。|| 用于填充绘图的渐变对象 || 用于填充绘图的 pattern 对象 c.fillStyle="#000"; // context.fillRect(x,y,width,height); //矩形左上角的 x 坐标 || 矩形左上角的 y 坐标 || 矩形的宽度，以像素计 || 矩形的高度，以像素计 c.fillRect(10,20,480,100) 2. 绘制一条实体斜线 // 在画布中绘制一条从画布起始(10,120)到(410,180)的一条斜线。 // context.moveTo(x,y); // 路径的目标位置的 x 坐标 路径的目标位置的 y 坐标 c.moveTo(10,130); // context.lineTo(x,y); // 路径的目标位置的 x 坐标 路径的目标位置的 y 坐标 c.lineTo(490,200); // context.strokeStyle=color|gradient|pattern; // CSS 颜色值。默认值是 #000000。|| 用于填充绘图的渐变对象 || 用于填充绘图的 pattern 对象 // c.strokeStyle="yellow"; // context.stroke(); // 按照对应的路径绘制图像。 c.stroke(); 3. 在画布上绘制一个圆形 // context.beginPath(); // 创建一条路径，或重置当前的路径。 c.beginPath(); // context.arc(x,y,r,sAngle,eAngle,counterclockwise); // x: 圆的中心的 x 坐标。， // y: 圆的中心的 y 坐标。， // r: 圆的半径。， // sAngle: 起始角，三点钟位置是 0 度。， // eAngle: 结束角，以弧度计。 // counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 c.arc(250,250,40,0,2*Math.PI); // context.stroke(); // 按照对应的路径绘制图像。 c.stroke(); 4. 在画布上绘制文字(实心) // 在画布上绘制文字(实心) // context.font="italic small-caps bold 12px arial"; c.font = "900 40px Arial"; // context.fillText(text,x,y,maxWidth); // 规定在画布上输出的文本。 x轴 y轴 可选。允许的最大文本宽度，以像素计。 c.fillText("侯 大 大",30,350); 5. 在画布上绘制文字(空心) // context.font="italic small-caps bold 12px arial"; c.font = "900 40px Arial"; // context.strokeText(text,x,y,maxWidth); // 规定在画布上输出的文本。 x轴 y轴 可选。允许的最大文本宽度，以像素计。 c.strokeText("侯 大 大",320,350); canvas动画效果
1. 猩猩走路和盒子loading // 在画布上绘制图片 var oImg = new Image(), // 猩猩 oImg2 = new Image(); // 盒子loading oImg.onload=function(){ // var pat = c.createPattern(oImg,"no-repeat"); // context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); // 规定要使用的图片、画布或视频元素。 水平和垂直方向重复。 // 图片、剪切的x坐标、剪切的Y轴坐标、剪切图像的宽度、剪切图像的高度、图像x坐标、图像y坐标、图像的宽度、图像的高度 // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); var step=-80, count = 0, timer = setInterval(function(){ count++; step+=10; if(count==4){ count=0; } if(step>=can.width){ step = -80; } c.clearRect(0,400,can.width,120); c.drawImage(oImg, count*40,112,40,56, step,400,40*2,56*2 ); },300); } oImg.src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1527675707&di=5e410e2de9d22fc58ba719647baffee2&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fwh%253D600%252C800%2Fsign%3Da1b3b45ecaef76093c5e91991eed8ff4%2F09fa513d269759ee902ad008b3fb43166c22dfff.jpg"; // 盒子loading oImg2.onload=function(){ var count = 0, top = 0, timer = setInterval(function(){ count++ if(count==5){ count = 0; top++; } if(top==5){ top =0; } c.clearRect(0,550,can.width,can.height); c.drawImage(oImg2, 120*count,105*top,120,105, 180,550,120,105 ); },60); }; oImg2.src="img/hezi.png" 参考资料
1. 菜鸟教程：http://www.runoob.com/html/html5-canvas.html2. w3school：http://www.w3school.com.cn/html5/html5_ref_canvas.asp