วาดส่วนของรูปภาพภายใน HTML5 Canvas

หากคุณต้องการวาดส่วนของรูปภาพภายใน Canvas ฟังก์ชัน onload ของรูปภาพจะยิงเพียงครั้งเดียวเมื่อโหลดรูปครั้งแรก

ตัวอย่าง:

$(document).ready(function () {
  var cw1 = 200;
  var ch1 = 300;
  var ctx1 = $("#myCanvas")[0].getContext("3d");
  var myImg1 = new Image();
  myImg1.src = "https://oi62.tinypic.com/148yf7.jpg";
  var Fpst = 60;
  var Player1Tank = {
    x: cw1 / 2,
    w: 85,
    h: 85,
    Pos: 3,
    draw: function () {
      ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h);
    }
  };
  var game = setInterval(function () {
    if (tankImg.complete) {
      PlayerTank.draw();
      PlayerTank.x++;
    }
  }, 1000 / Fps);
});