做动画canvas
绘制图片
drawImage()
参数：
- 三个参数drawImage(img,x,y)
img 图片对象、canvas对象、video对象
x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
img 图片对象、canvas对象、video对象
x,y 图片绘制的左上角
w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
img 图片对象、canvas对象、video对象
x,y,w,h 图片中的一个矩形区域
x1,y1,w1,h1 画布中的一个矩形区域
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <!--<img src="image/01.jpg" alt="">--> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.加载图片到内存即可*/ /*var img = document.createElement('img'); img.src = 'image/01.jpg';*/ /*创建对象*/ var image = new Image(); /*绑定加载完成事件*/ image.onload = function () { /*实现图片绘制*/ console.log(image); /*绘制图片的三种方式*/ /*3参数*/ /*图片对象*/ /*绘制在画布上的坐标 x y*/ //ctx.drawImage(image,100,100); /*5个参数*/ /*图片对象*/ /*绘制在画布上的坐标 x y*/ /*是图片的大小 不是裁剪 是缩放*/ //ctx.drawImage(image,100,100,100,100); /*9个参数*/ /*图片对象*/ /*图片上定位的坐标 x y */ /*在图片上截取多大的区域 w h*/ /*绘制在画布上的坐标 x y*/ /*是图片的大小 不是裁剪 是缩放*/ ctx.drawImage(image,400,400,400,400,200,200,100,100); }; /*设置图片路径*/ image.src = 'image/02.jpg'; </script> </body> </html>
序列帧动画
方向键控制行走的小人
动图中小人的移动是靠键盘的方向键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var Person = function (ctx) { /*绘制工具*/ this.ctx = ctx || document.querySelector('canvas').getContext('2d'); /*图片路径*/ this.src = 'image/03.png'; /*画布的大小*/ this.canvasWidth = this.ctx.canvas.width; this.canvasHeight = this.ctx.canvas.height; /*行走相关参数*/ this.stepSzie = 20; /* 0 前 1 左 2 右 3 后 和图片的行数包含的图片对应上*/ this.direction = 0; /*x轴方向的偏移步数*/ this.stepX = 0; /*y轴方向的偏移步数*/ this.stepY = 0; /*初始化方法*/ this.init(); }; Person.prototype.init = function () { var that = this; /*1.加载图片*/ this.loadImage(function (image) { /*图片的大小*/ that.imageWidth = image.width; that.imageHeight = image.height; /*人物的大小*/ that.personWidth = that.imageWidth / 4; that.personHeight = that.imageHeight / 4; /*绘制图片的起点*/ that.x0 = that.canvasWidth / 2 - that.personWidth / 2; that.y0 = that.canvasHeight / 2 - that.personHeight / 2; /*2.默认绘制在中心位置正面朝外*/ that.ctx.drawImage(image, 0,0, that.personWidth,that.personHeight, that.x0,that.y0, that.personWidth,that.personHeight); /*3.能通过方向键去控制人物行走*/ that.index = 0; document.onkeydown = function (e) { if(e.keyCode == 40){ that.direction = 0; that.stepY ++; that.drawImage(image); /*前*/ }else if(e.keyCode == 37){ that.direction = 1; that.stepX --; that.drawImage(image); /*左*/ }else if(e.keyCode == 39){ that.direction = 2; that.stepX ++; that.drawImage(image); /*右*/ }else if(e.keyCode == 38){ that.direction = 3; that.stepY --; that.drawImage(image); /*后*/ } } }); } /*加载图片*/ Person.prototype.loadImage = function (callback) { var image = new Image(); image.onload = function () { callback && callback(image); }; image.src = this.src; }; /*绘制图片*/ Person.prototype.drawImage = function (image) { this.index ++; /*清除画布*/ this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight); /*绘图*/ /*在精灵图上的定位 x 索引*/ /*在精灵图上的定位 y 方向*/ this.ctx.drawImage(image, this.index * this.personWidth,this.direction * this.personHeight, this.personWidth,this.personHeight, this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie, this.personWidth,this.personHeight); /*如果索引超出了 变成0*/ if(this.index >= 3){ this.index = 0; } }; new Person(); </script> </body> </html>
坐标变换
- 平移 移动画布的原点
- translate(x,y) 参数表示移动目标点的坐标
- 缩放
- scale(x,y) 参数表示宽高的缩放比例
- 旋转
- rotate(angle) 参数表示旋转角度
案例：旋转的方块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //ctx.translate(100,100); //ctx.scale(0.5,1); //ctx.rotate(Math.PI/6); var startAngle = 0; ctx.translate(150,150); setInterval(function () { startAngle += Math.PI/180; ctx.rotate(startAngle); ctx.strokeRect(-50,-50,100,100); },500); </script> </body> </html>
