Canvas 繪製圖像的三種方法、實現幀動畫

阿新 • • 發佈：2019-01-21

繪製圖像的三種方法

/*
* 繪製圖像
* ctx.drawImage();
*/
//第一種版本三引數版本context.drawImage(img,x,y);，把圖形繪製到指定的座標
//必須要在圖片下載之後才可以使用，使用onload事件
img.onload=function(){
ctx.drawImage(img,10,10);
}
//第二種版本五引數版本context.drawImage(img,x,y,width,height); 把圖形繪製到指定的座標、設定影象的寬高
//必須要在圖片下載之後才可以使用
img.onload=function(){
ctx.drawImage(img,10,10,200,200);
}
//第三種版本九引數版本 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx :開始剪下的X座標，sy:開始剪下的Y座標，swidth:被剪下影象的寬度，sheight:被剪下影象的高度
//必須要在圖片下載之後才可以使用
img.onload=function(){
ctx.drawImage(img,
100,100,200,300,
10,10,200,200);
}

實現幀動畫

canvas{
border: 1px solid salmon;
}
img{
width:300px;
height: 300px;
display: none;
}

</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="../img/NPC4.png"/>
    <script src="../js/Person.js" type="text/javascript" charset="utf-8"></script>
   <script>
     var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var img = document.querySelector('img');

      // 必須要在圖片載入完畢之後，才能使用
    img.onload = function() {
        var person = new Person( ctx, img, 4, 4, 150, 150, 150, 150 );
        person._bind();

        // 修改direction，那麼就是修改小人的行走方向
        person.direction = 2;

        setInterval( function() {

            // 清除畫布
            ctx.clearRect( 0, 0, cvs.width, cvs.height );

            // 繪製
            person.draw();
            person.currentFrame = ++person.currentFrame >= person.widthFrame? 0 : person.currentFrame;

            // 計算下一次繪製時，小人的位置
            person.update();

        }, 100);
    }

</script>


</body>


js程式碼

(function( w ) {

// 混入式繼承( copy繼承 )
function extend( o1, o2 ) {
    for ( var key in o2 ) {
        if ( o2.hasOwnProperty( key ) ) {
            o1[ key ] = o2[ key ];
        }
    }
}

/*
 * constructor { Person } 人建構函式
 * param { ctx: Context } 繪製環境
 * param { img: Image } 繪製的影象
 * param { widthFrame: number } 影象一排有多少個人
 * param { heightFrame: number } 影象一列有多少個人
 * param { x: number } 指定人物繪製的x軸座標
 * param { y: number } 指定人物繪製的y軸座標
 * param { renderWidth: number } 人物繪製時的寬
 * param { renderHeight: number } 人物繪製時的高
 * param { speed: number } 人物行走的速度
 * */
function Person( ctx, img, widthFrame, heightFrame, x, y, renderWidth, renderHeight, speed ) {

    this.ctx = ctx;
    this.img = img;
    this.widthFrame = widthFrame;
    this.heightFrame = heightFrame;

    // 影象繪製時的座標和大小
    this.x = x;
    this.y = y;
    this.renderWidth = renderWidth;
    this.renderHeight = renderHeight;

    // 行走的速度
    this.speed = speed || 2;

    // 求一個人的寬和高
    this.width = this.img.width / this.widthFrame;
    this.height = this.img.height / this.heightFrame;

    // 當前繪製某個方向的第幾幀
    this.currentFrame = 0;

    // 當前行走的方向，預設是第一排的方向
    this.direction = 0;

    // 繫結事件
    this._bind();
}

// 給原型擴充方法
extend( Person.prototype, {

    // 繪製方法
    draw: function() {

        this.ctx.drawImage( this.img,
            this.width * this.currentFrame, this.height * this.direction, this.width, this.height,
            this.x, this.y, this.renderWidth, this.renderHeight);

    },

    // 繫結事件
    _bind: function() {

        var self = this;

        document.addEventListener( 'keydown', function( e ) {

            // 根據按鍵切換行走方向
            switch ( e.keyCode ) {
                case 37:
                    self.direction = 1;
                    break;
                case 38:
                    self.direction = 3;
                    break;
                case 39:
                    self.direction = 2;
                    break;
                case 40:
                    self.direction = 0;
                    break;
            }

        } );
    },

    // 更新小人下一陣繪製時的資料
    update: function() {

        switch ( this.direction ) {

            // 向下走，y軸加
            // 當小人向下出畫布，那麼從上邊再走出來
            case 0:
                this.y += this.speed;
                this.y = this.y > this.ctx.canvas.height? -this.height: this.y;
                break;

            // 向左走，x軸減
            // 當小人向左走出畫布，那麼從右邊再走出來
            case 1:
                this.x -= this.speed;
                this.x = this.x < -this.width? this.ctx.canvas.width: this.x;
                break;

            // 向右走，x軸加
            // 當小人向右走出畫布，那麼從左邊再走出來
            case 2:
                this.x += this.speed;
                this.x = this.x > this.ctx.canvas.width? -this.width: this.x;
                break;

            // 向上走，y軸減
            // 當小人向上出畫布，那麼從下邊再走出來
            case 3:
                this.y -= this.speed;
                this.y = this.y < -this.height? this.ctx.canvas.height: this.y;
                break;
        }

    }

} );

// 對外暴露Person
w.Person = Person;

}( window ));

Canvas 繪製圖像的三種方法、實現幀動畫

Canvas 繪製圖像的三種方法、實現幀動畫

安裝軟件包的三種方法、rpm包介紹及工具用法、yum用法及搭建本地倉庫

二十一、安裝軟件包的三種方法、RPM包介紹、rpm工具用法、yum工具用法、yum搭建本地倉庫

安裝軟件包的三種方法、rpm包介紹、rpm工具用法、yum工具用法、yum搭建本地倉庫安裝軟件包的

html li標簽前面添加圖標三種方法

jQuery字體圖標的三種方法

微信小程式引入背景圖的三種方法

一、多執行緒基礎概念、實現執行緒三種方法、中斷執行緒方法，以及執行緒狀態轉化

安裝軟體包的三種方法、 rpm、yum 工具用法、yum搭建本地倉庫

Vue-Vue文字渲染三種方法 {{}}、v-html、v-text

安裝軟體包的三種方法、rpm包介紹、rpm、yum工具用法與yum搭建本地倉庫

[iOS 繪製虛線] 轉: iOS 繪製虛線的三種方法

iOS 繪製虛線的三種方法

建立圖的三種方法（鄰接矩陣+鄰接表+十字連結串列）

canvas繪製圖像輪廓效果

交換兩個變量的值，不借助第三個變量的三種方法(JS實現)

【利用鎖的三種方法來實現在多個執行緒時只執行一個執行緒】

使用Matlab繪製三維圖的幾種方法

struts2開發action 的三種方法以及通配符、路徑匹配原則、常量

python字符串連接的三種方法及其效率、適用場景詳解

Canvas 繪製圖像的三種方法、實現幀動畫

相關推薦