Canvas 學習(二)
上一篇Canvas 學習(一)中我是用canvas繪制了一些基本和組合的圖形.
現在開始繪制圖片和動畫幀,以及面向對象的升級版本.
還是一樣,看代碼,所有的代碼都托管在github上
先看第一個例子,繪制一張圖片
01-繪制圖片.htm
<body>
<canvas id="img" height="400" width="400"></canvas>
<script src="01繪制圖片.js"></script>
</body>
這里的圖片源有以下方式
在頁面中添加一個image標簽,然后通過document.getElementById() 的方式來拿到
通過new Image().src = ...; 通過這種方法來拿到.
在這里,我使用第二種方法,我的圖片放在了img文件夾下.
- HTMLCanvasElement
可以使用另一個canvas元素作為你的圖片源。
- ImageBitmap
這是一個高性能的位圖，可以低延遲地繪制，它可以從上述的所有源以及其它幾種源中生成。
01繪制圖片.js
var ctx = document.getElementById('img').getContext('2d');
var img = new Image();
img.src = './img/0.jpg';
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
}
美膩吧
在給img對象賦值了src 屬性的時候,瀏覽器會立即開始加載圖片,只有當圖片加載完畢的時候,我們才能開始繪制圖片,所以使用了img.onload = functioin(){...}; 的方式
context.drawImage()有三種方法,下面開始介紹
- drawImage(image, x, y)
其中
image是 image 或者 canvas 對象，x和y 是其在目標 canvas 里的起始坐標。這里就會按照原生圖片進行繪制,不會進行縮放或者裁剪
- drawImage(image, x, y, width, height)
這個方法多了2個參數：
width和height，這兩個參數用來控制 當像canvas畫入時應該縮放的大小.由於我們在畫圖的時候,希望圖片應該按照原比例來呈現.所以就想在頁面中寫入img標簽一樣,我們通常情況下只是放入一個參數,然后使用公式計算另一個參數.
由於要求
width/height==originWidth/originHeight
故
height=width/originWidth*originHeight
使用這個公式用寬度來計算高度就可以很按照源比例繪制, 當然如果你想把臉瘦下來,那就另說了.....
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
drawImage方法的第三個也是最后一個變種有8個新參數，用於控制做切片顯示的。第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數最好是參照下面的圖解，前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標顯示位置和大小
這個方法主要是用來做切圖的,下面我們做的活動精靈剛好就用到了它.
移動精靈
這是我要用到的素材.
可以看到,它就是很多很多的小圖片組合在一起,那么要使它動起來的方式就很簡單了.
在畫布上不停繪制每一行的小圖形,當繪制一個時,就清除前面一個的痕跡.
下面是代碼
02移動精靈.html
<article>
<canvas height="200" width="400" id="genius"></canvas>
<div>
<button id="forward">forward</button>
<button id="right"> right</button>
<button id="back">back</button>
<button id="left">left</button>
</div>
</article>
<script src="02移動精靈.js"></script>
我放置了一個canvas畫布和4個按鈕,讓他前后左右動.
02移動精靈.js
var ctx = document.getElementById('genius').getContext('2d');
var img = new Image();
var intervalId;
var draw = function (direction) {
var rowIndex = direction, // 當前是第幾行的圖片
columnIndex = 0, // 當前是第幾列的圖片
frame = 6, // 一秒有幾幀
singleWidth = 40, // 每一個小圖片的寬度
singleHeight = 65; // 每一個小圖片的高度
window.clearInterval(intervalId);
intervalId = setInterval(function () {
// 在沒繪制一張小圖片之前,都要清空之前繪制的圖片,這樣才能顯示出動畫效果來,
ctx.clearRect(10, 10, singleWidth, singleHeight);
// 在大圖上剪切繪制繪制
ctx.drawImage(img, columnIndex * singleWidth, rowIndex * singleHeight, singleWidth, singleHeight, 10, 10, singleWidth, singleHeight);
columnIndex++;
columnIndex %= 4;
}, 1000 / frame);
}
這里draw函數里防止了主要的代碼,通過計時器來使圖片動起來(注意不要使用循環)
注意在每一次移動方向后都要清除計時器,
columnIndex %= 4;columnIndex++; 這兩句是常用的循環控制語句.
02移動精靈.js
onload = function () {
img.src = "./img/DMMban.png";
img.onload = function () {
// 用數字表示這個精靈移動的方向.
// forward: 0,left:1,right:2,back:3
draw(0);
}
document.querySelector('#forward').addEventListener('click', () => {
draw(0);
});
document.querySelector('#left').addEventListener('click', () => {
draw(1);
});
document.querySelector('#right').addEventListener('click', () => {
draw(2);
});
document.querySelector('#back').addEventListener('click', () => {
draw(3);
});
};
下面是效果圖.
這個精靈並不是很好看,不過因為我不是做動畫的,找不到比較漂亮的素材,將就看吧...
面向對象版本
好了,這個列子相對於第一篇文章例子要復雜一點,所以我也做了一個面向對象的版本,使用到了原型繼承和一些其他的知識點.(關於原型繼承和JavaScript面向對象在這里有介紹: JavaScript面向對象高級(一)
注意封裝對象的方式,我個人認為這樣封裝對象時非常好的. 這也是很多大牛推薦的.在我的JavaScript高級框架設計部分將會介紹jQuery對象封裝的方式.
01-移動精靈-面向對象版本.htm
<body>
<article>
<canvas height="200" width="400" id="genius"></canvas>
<div>
<button id="forward">forward</button>
<button id="right"> right</button>
<button id="back">back</button>
<button id="left">left</button>
</div>
</article>
<script src="01-移動精靈-面向對象版本.js"></script>
</body>
01-移動精靈-面向對象版本.js
- Genius 類的封裝
var Genius = function (option) {
Genius.prototype._init_(option);
}
Genius.prototype = {
constructor: Genius,
// 把對象的初始化代碼都放在這里,把它需要用到的所有變量都綁定到它的原型上.
_init_: function (option) {
this.img = option.img;
this.rowIndex = option.rowIndex;
this.columnIndex = option.columnIndex;
this.frame = option.frame;
this.singleWidth = option.singleWidth;
this.singleHeight = option.singleHeight
},
// 由於js面向對象的特點,獲取會從父對象的prorotype里面獲取,但是設置只會設置自己的
draw: function (ctx, direction) {
window.clearInterval(this.intervalId);
this.rowIndex = direction;
// 一定要設置,因為在setInterval里面,this指的就是window變量
var that = this;
this.intervalId = setInterval(function () {
// 在沒繪制一張小圖片之前,都要清空之前繪制的圖片,這樣才能顯示出動畫效果來,
ctx.clearRect(10, 10, that.singleWidth, that.singleHeight);
// 在大圖上剪切繪制繪制
ctx.drawImage(that.img, that.columnIndex * that.singleWidth, that.rowIndex * that.singleHeight, that.singleWidth, that.singleHeight, 10, 10, that.singleWidth, that.singleHeight);
that.columnIndex++;
that.columnIndex %= 4;
}, 1000 / that.frame);
}
}
window.onload = function () {
var ctx = document.getElementById('genius').getContext('2d');
var oringinImg = new Image();
oringinImg.src = "./img/DMMban.png";
var genius;
oringinImg.onload = function () {
// 實例化構造一個對象
genius = new Genius({
img: oringinImg,
rowIndex: 0,
columnIndex: 0,
frame: 6,
singleWidth: 40,
singleHeight: 65
});
// 調用Genius的prototype里面的draw方法.
genius.draw(ctx, 0);
}
document.querySelector('#forward').addEventListener('click', () => {
genius.draw(ctx, 0);
});
document.querySelector('#left').addEventListener('click', () => {
genius.draw(ctx, 1);
});
document.querySelector('#right').addEventListener('click', () => {
genius.draw(ctx, 2);
});
document.querySelector('#back').addEventListener('click', () => {
genius.draw(ctx, 3);
});
};
這是效果圖
嗯 canvas繪制動畫幀就到這里,下一篇Canvas(三) konva 將會介紹canvas的旋轉和konva庫.
由於本人水平有限,如有錯誤,如果錯誤,望不吝賜教.
最后特別感謝恩師蔣坤老師(jk)對我的知識學習和人生引導的極大幫助,非常感謝他.
另 由於現任公司沒有適合我的崗位,想求職一份,職位: 前端開發. 我的郵箱 mymeat@126.com.