H5 canvas基礎入門到捕魚達人小遊戲實現(4)canvas事件處理和圖形動作

這已經是第四篇canvas文章了，今天主要講canvas中圖形動作和canvas中的事件

圖形動作

常用動作api：平移，縮放，旋轉

平移

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.translate(100,100);//x,y平移到的位置
gd.fillRect(0,0,100,100);//繪製一個正方形

看看示例圖

如果我想在一塊畫布中移動兩個塊呢看看代碼

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    gd.beginPath();
    gd.translate(100,100);
    gd.fillRect(0,0,100,100);

    gd.fillStyle = "red";
    gd.translate(100,100);
    gd.fillRect(0,0,100,100);

按照代碼分析：先移動100,100創建一個塊，再移動100,100,在創建一個紅色的塊。
如圖所示：

可以看到，第二次移動是基於第一次移動的效果疊加的，第二個塊相當於移動到了200,200的位置了。
這樣狀態就非常不好管理了，因爲都是疊加上去的，那麼有這麼一個api可以使得畫布保存一個狀態，當我們第一次移動完之後，在恢復這個狀態，在進行第二次移動，就互相不影響了
看看代碼：

    var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    gd.save();//保存這個時候的狀態
    gd.beginPath();
    gd.translate(100,100);
    gd.fillRect(0,0,100,100);
    gd.restore();//恢復到剛剛保存的狀態，然後在重新開始繪製一個塊

    gd.fillStyle = "red";
    gd.translate(150,150);
    gd.fillRect(0,0,100,100);

這樣寫的效果就完全不一樣了。

看圖，第二個塊又是從0開始計算了150,150然後繪製的正方形。
這兩個api非常重要

save();//保存一個狀態
restore();//恢復一個狀態

旋轉

context.rotate(angle);//傳入弧度，如果傳入角度的話需要使用公式進行轉換

看看示例代碼

function d2a(n){
    return n*Math.PI/180;
}
document.addEventListener('DOMContentLoaded',function(){
    var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    gd.beginPath();
    gd.rotate(d2a(10));
    gd.fillRect(100,100,100,100);

    gd.beginPath();
    gd.fillStyle = 'rgba(255,0,0,0.3)';
    gd.fillRect(0,0,oC.width,oC.height);
},false);

效果圖：

爲什麼是這樣的效果？？
其實原因不是別的，其實就是畫布被旋轉了。記住是畫布被旋轉了。

縮放：

context.scale(scalewidth,scaleheight);
scalewidth:縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
scaleheight:縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)

實例代碼：

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.beginPath();
gd.scale(2,1);//x軸縮放200%，y軸不變
gd.fillRect(100,100,100,100);

來看看效果圖：

事件處理

canvas裏面的圖形是不能直接綁定事件的，目前只有canvas元素可以綁定事件。那麼我們應該如何給相應的圖形綁定事件呢？判斷位置。是的
看一個點擊事件的基本處理方式：

    var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    var x = 100;
    var y = 100;
    var w = 200;
    var h = 100;

    gd.fillRect(x,y,w,h);

    oC.onclick=function(ev){
        var downX = ev.pageX;
        var downY = ev.pageY;
        if(downX>x&&downX<x+w&&downY>y&&downY<y+h){
            alert('點在裏面');
        }else{
            alert('點在外面');
        }
    };

看效果圖：

沒有非常特別的辦法只能是通過鼠標在屏幕中的位置和繪製的塊的位置進行比對，從而添加相應的事件。

在看一個圓形的事件判斷

    var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    var cx = oC.width/2;
    var cy = oC.height/2;
    var r = 100;
    gd.arc(cx,cy,r,0,360,false);
    gd.fill();

    oC.onclick=function(ev){
        var downX = ev.pageX;
        var downY = ev.pageY;
        var a = downX-cx;
        var b = cy-downY;
        var c = Math.sqrt(a*a+b*b);
        if(c<r){
            alert('點上了');
        }else{
            alert('沒點上');
        }
    };

不貼圖了跟上面的效果一樣，只是判斷方式有所區別。
其他任何事件和點擊事件都差不多，主要是去判斷觸發的位置。

圖形拖拽

先看看實例代碼：

var oC = document.querySelector('#c1');
    var gd = oC.getContext('2d');
    var x = 0,
        y = 0,
        w = 100,
        h = 100;
    gd.beginPath();
    gd.strokeRect(x,y,w,h);
    oC.onmousedown = function(e){
        //記錄初始的位置
        var startX = e.pageX;
        var startY = e.pageY;
        //判斷是否點擊在塊裏面
        if(startX>x&&startX<x+w&&startY>y&&startY<y+h){
            var disX = startX - x;
            var disY = startY - y;
            document.onmousemove = function(e){
                x = e.pageX-disX;
                y = e.pageY-disY;
                gd.clearRect(0,0,oC.width,oC.height);
                gd.strokeRect(x,y,w,h);
            };
            document.onmouseup=function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    }

效果演示：

總結：這節主要講解了canvas的圖形動作和事件，慢慢的發現了，畫布中的物體終於開始會動了，下節主要的內容是canvas處理圖片，並且讓圖片動起來，看來捕魚就要開始了。