canvas學習和麪向對象(二)

時間 2019-11-13

標籤 canvas 學習面向對象欄目軟件設計简体版

原文原文鏈接

Canvas 學習(二)

上一篇Canvas 學習(一)中我是用canvas繪製了一些基本和組合的圖形.html

如今開始繪製圖片和動畫幀,以及面向對象的升級版本.前端

仍是同樣,看代碼,全部的代碼都託管在github上git

先看第一個例子,繪製一張圖片github

01-繪製圖片.htmcanvas

<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庫.

因爲本人水平有限,若有錯誤,若是錯誤,望不吝賜教.