做動畫canvas
繪制圖片
drawImage()
參數(shù)：
- 三個參數(shù)drawImage(img,x,y)
- img 圖片對象、canvas對象、video對象
- x,y 圖片繪制的左上角
- 五個參數(shù)drawImage(img,x,y,w,h)
- img 圖片對象、canvas對象、video對象
- x,y 圖片繪制的左上角
- w,h 圖片繪制尺寸設置(圖片縮放，不是截取)
- 九個參數(shù)drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 圖片對象、canvas對象、video對象
- x,y,w,h 圖片中的一個矩形區(qū)域
- x1,y1,w1,h1 畫布中的一個矩形區(qū)域
代碼示例：
<!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.加載圖片到內(nèi)存即可*/
/*var img = document.createElement('img');
img.src = 'image/01.jpg';*/
/*創(chuàng)建對象*/
var image = new Image();
/*綁定加載完成事件*/
image.onload = function () {
/*實現(xiàn)圖片繪制*/
console.log(image);
/*繪制圖片的三種方式*/
/*3參數(shù)*/
/*圖片對象*/
/*繪制在畫布上的坐標 x y*/
//ctx.drawImage(image,100,100);
/*5個參數(shù)*/
/*圖片對象*/
/*繪制在畫布上的坐標 x y*/
/*是圖片的大小 不是裁剪 是縮放*/
//ctx.drawImage(image,100,100,100,100);
/*9個參數(shù)*/
/*圖片對象*/
/*圖片上定位的坐標 x y */
/*在圖片上截取多大的區(qū)域 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;
/*行走相關(guān)參數(shù)*/
this.stepSzie = 20;
/* 0 前 1 左 2 右 3 后 和圖片的行數(shù)包含的圖片對應上*/
this.direction = 0;
/*x軸方向的偏移步數(shù)*/
this.stepX = 0;
/*y軸方向的偏移步數(shù)*/
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) 參數(shù)表示移動目標點的坐標
- 縮放
- scale(x,y) 參數(shù)表示寬高的縮放比例
- 旋轉(zhuǎn)
- rotate(angle) 參數(shù)表示旋轉(zhuǎn)角度
案例：旋轉(zhuǎn)的方塊
<!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>
?
|
