一、绘制图片
①加载图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); // 创建对象 var image=new Image(); // 绑定加载完成事件 image.onload=function(){ // 这里进行图片相关的绘制 console.log(image);//<img src='1.jpg'> } // 设置图片路径 image.src='1.jpg'; </script> </body> </html>
②三个参数：drawImage（img，x，y）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); var image=new Image(); image.onload=function(){ /* * *ctx.drawImage(image,x,y) *image是图片对象,canvas对象,video对象 *x和y表示绘制起点,从图片的左上角开始 */ ctx.drawImage(image,100,100); } image.src='1.jpg'; </script> </body> </html>
③五个参数：drawImage（img，x，y，w，h）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); var image=new Image(); image.onload=function(){ /* * *ctx.drawImage(image,x,y,w,h) *image是图片对象,canvas对象,video对象 *x和y表示绘制起点,从图片的左上角开始 *w和h表示图片的大小,对图片的缩放 */ ctx.drawImage(image,100,100,200,200); } image.src='1.jpg'; </script> </body> </html>
④九个参数：drawImage（img，x，y，w，h，x1，y1，w1，h1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); var image=new Image(); image.onload=function(){ /* * *ctx.drawImage(image,x,y,w,h,x1,y1,w1,h1) *image是图片对象,canvas对象,video对象 *x和y对图片的进行截取的坐标,从左上角开始 *w和h表示截取图片的大小,对图片的截取 *x1和y1是表示绘制起点,从图片的左上角开始 *w1和h1是表示图片的大小,对图片的缩放 *x,y,w,h是对图片的操作 *x1,y1,w1,h1是对画布上的操作 */ ctx.drawImage(image,100,100,200,200,100,100,200,200); } image.src='1.jpg'; </script> </body> </html>
二、帧动画
①首先需要一张精灵图，里面有一组可以连续起来做动画的人或者物
②可以动态的获取图片上主体人或者物的大小尺寸
③通过drawImage( )获取图片上的主体人或者物
④根据索引，在固定的时间间隔内（定时器），更换图片，从而达到动起来的效果，实现帧动画
三、坐标变换
①平移：translate（x，y）参数表示画布的原点的坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); // 第一个矩形 ctx.beginPath(); ctx.fillRect(100,100,200,100); // 第二个矩形,移动translate(x,y) 是对原点的移动 ctx.beginPath(); ctx.translate(100,100); ctx.fillStyle='red'; ctx.fillRect(100,100,200,100); </script> </body> </html>
②缩放：scale（x，y）参数表示画布坐标的缩放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); // 第一个矩形 ctx.beginPath(); ctx.fillRect(100,100,200,100); // 第二个矩形,移动scale(x,y) 是对画布坐标的缩放 ctx.beginPath(); ctx.scale(0.5,0.5); ctx.fillStyle='red'; ctx.fillRect(100,100,200,100); </script> </body> </html>
③旋转：rotate（angle）参数表示旋转的角度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector('canvas'); var ctx=myCanvas.getContext('2d'); ctx.translate(200,200); setInterval(function(){ // rotate(angle)默认是以画布原点的位置为圆心进行旋转 // 通过translate(x,y)可以对画布原点进行移动 angle=Math.PI/90; ctx.rotate(angle); ctx.strokeRect(0,0,100,100); },100); </script> </body> </html>
