二維CANVAS基本語法（圖片Image）

weixin_34054866發表於2018-01-15
Canvas

一、繪製圖片image

步驟：
  1. 建立圖片物件var img = new Image();
  2. 寫入圖片原始檔 img.src=”路徑”;
  3. 放入圖片
  • 引數：圖片源的切割起點 x1, y1
  • 引數：圖片源的切割寬高 w1,h1
  • 引數：繪製圖在畫布上起點的座標 x2, y2
  • 引數：繪製圖的寬高w2,h2
    img.onload = function(){ context.drawImage(img, x1, y1, w1, h1, x2, y2, w2, h2); }
三種情況（寫入不同引數）
  1. 原圖顯示 context.drawImage( img, x2, y2);
  2. 縮放顯示 context.drawImage(img, x2, y2, w2, h2);
  3. 剪下顯示（類似精靈圖） context.drawImage(img, x1, y1, w1, h1, x2, y2, w2, h2);
擦除畫布某塊區域 context.clearRect(x, y, w, h);


二、案例：鍵盤控制小人上下左右

一個小BUG：因為畫板寬高不是小人的倍數，所以當小人在邊緣處行走會有不好的體驗。


7156733-53516f02a3fb3cc2.gif
鍵盤控制小人.gif

核心動作為將精靈圖用繪圖畫到畫板上的相應位置
context.drawImage(img, 精靈圖座標xy, 精靈圖尺寸wh, 繪圖座標xy, 繪圖尺寸wh);


7156733-a753e306535aec50.png
小人兒動畫分析.png
<body>      //畫板
<canvas width="600" height="400" id="canvas" style="border: 2px solid skyblue;"></canvas></body>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();             //建立圖片物件
    img.src = "./img/DMMban.png";
    img.onload = function () {
        var manWidth = img.width / 4;     //小人寬高
        var manHeight = img.height / 4;
        var x = 0;               // 初始座標值x, y
        var y = 2*manHeight;
        var speed = 15;     // 步長
        var step = 0;     //行走步數初始值，每一步則圖片為第（step%4）張
        var xindex = 0;     //該步數下，圖片顯示為第yindex行下的第xindex個
        var yindex = 2;      //yindex=左1、右2、上3、下0，初始設為2
        context.drawImage(img,0,yindex*manHeight, manWidth, manHeight, x, y, manWidth, manHeight);
        window.onkeydown = function (event) {  //監聽鍵盤
            context.clearRect(0, 0, canvas.width, canvas.height);  //擦畫板
            // context.beginPath();      //畫image不用換紙
            switch(event.keyCode){   //上下左右按鍵KeyCode
                case 37:    
                    x=x<0? 0 : x-speed;     //判斷邊界
                    yindex = 1;  
                    break;
                case 38:    
                    y=y<0?0 : y-speed;     //判斷邊界
                    yindex = 3; 
                    break;
                case 39: 
                    x=x>canvas.width-manWidth? (canvas.width-manWidth): x+speed;     //判斷邊界
                    yindex = 2;
                    break;
                case 40: 
                    y=y>canvas.height-manHeight?(canvas.height-manHeight): y+speed;     //判斷邊界
                    yindex = 0;
                    break;
            }
            walk(); //呼叫函式畫圖
        }
        function walk(){   //畫圖函式
            step++;           //增加步數
            xindex = step%4;    //
            context.drawImage(img,xindex*manWidth, yindex*manHeight, manWidth, manHeight, x, y, manWidth, manHeight);
        }
    }
</script>

2018.1.15

相關文章