canvas之實現控制動畫
canvas之實現控制動畫
效果圖
簡單的思路分析
首先寫出使用畫布的基礎程式碼,再分析實現操作動畫的需求。
- 確定畫布的大小,選定圖片的路徑
- 確定操縱動畫時的行走步數
- 載入圖片,設定大小
- 確定圖片的起點,以及預設動畫的朝向
- 確定通過方向鍵動畫的走動方向
- 繪製動畫,對精靈圖進行定位,每次完成一次動畫都要對畫布進行清空。
詳細程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</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/04.png';
/*畫布的大小*/
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
/*行走相關引數*/
this.stepSzie = 10;
/* 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>
相關文章
- 使用canvas實現簡單動畫Canvas動畫
- canvas動畫特效 之 星空Canvas動畫特效
- canvas實現簡答動畫張閉嘴效果Canvas動畫
- 基於 HTML5 Canvas 實現文字動畫特效HTMLCanvas動畫特效
- 基於 HTML5 Canvas 實現的文字動畫特效HTMLCanvas動畫特效
- Flutter實戰之動畫實現篇Flutter動畫
- canvas水球動畫Canvas動畫
- canvas動畫心得Canvas動畫
- Canvas 動畫的效能優化實踐Canvas動畫優化
- canvas系列三之《煙花》效果實現Canvas
- canvas之自定義頭像功能實現Canvas
- Canvas 實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- Canvas 實現畫中畫動畫效果–網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- RecyclerView 之使用 ItemTouchHelper 實現互動動畫View動畫
- iOS動畫系列之七:實現類似Twitter的啟動動畫iOS動畫
- iOS動畫實戰之Lottie動畫iOS動畫
- canvas動畫教程-1 引言Canvas動畫
- Canvas 動畫初體驗Canvas動畫
- canvas實現波浪效果Canvas
- Flutter實現動畫Flutter動畫
- 【canvas】動畫原理の胡克定律Canvas動畫
- canvas繪製動畫的技巧Canvas動畫
- 基於canvas的骨骼動畫Canvas動畫
- Canvas 繪製風向動畫Canvas動畫
- Canvas 控制元件Canvas控制元件
- 用canvas實現流星特效Canvas特效
- canvas拼圖功能實現Canvas
- canvas 實現雷達圖Canvas
- canvas 基礎系列(三)之實現九宮格抽獎Canvas
- canvas 基礎系列(二)之實現大轉盤抽獎Canvas
- Android 動畫實現Android動畫
- iOS實現字串動畫iOS字串動畫
- React實現動畫效果React動畫
- Javascript實現動畫效果JavaScript動畫
- JavaScript動畫實現初探JavaScript動畫
- Canvas百分比動畫Canvas動畫
- 使用canvas繪製圓弧動畫Canvas動畫
- 網頁小實驗——用canvas生成精靈動畫圖片網頁Canvas動畫