Canvas ການສະແດງການປ່ຽນແປງກາກກູເກີ

ວິກັດສີແດງສາມາດຫັນດັງ:

ການຫັນດັງຕົກປະກອບ

ໃນບາງສ່ວນທີ່ກ່ອນຂອງວິທີການນີ້ວິກັດສີແດງສາມາດເຄື່ອນຍ້າຍໃນເຂດຫຼັງໄກແຕ່ບໍ່ສາມາດຫັນດັງຫຼືຫັນດັງ:

ຕ້ອງການຫັນດັງຄວາມປະກອບນັ້ນພວກເຮົາຕ້ອງປ່ຽນວິທີການຂຽນຄວາມປະກອບ:

ວິທີການຫັນດັງທີ່ມີຢູ່ຂອງບັນຊີ canvas ຈະຫັນດັງບັນຊີທັງໝົດ:

ທຸກຢ່າງທີ່ພວກເຮົາຂຽນໃນແບບ canvas ຈະຫັນດັງຕະຫຼອດບັນຊີທີ່ຫັນດັງຂອງຄວາມປະກອບນັ້ນ:

ສະນັ້ນພວກເຮົາຕ້ອງໃຊ້: update() ການປ່ຽນສະໝີໃນວິທີການ:

ກ່ອນເທື່ອພວກເຮົາຕ້ອງໄດ້ຮັບຄືນພາບແບບທີ່ກຳລັງໃຊ້:

ctx.save();

ຫຼັງຈາກນັ້ນພວກເຮົາໃຊ້ວິທີການ translate ເພື່ອປ່ຽນຕັ້ງພາບແບບທັງໝົດໄປຫາສູນກາງຂອງຄວາມປະກອບ:

ctx.translate(x, y);

ຫຼັງຈາກນັ້ນພວກເຮົາໃຊ້ວິທີການ rotate() ເພື່ອຫັນດັງ:

ctx.rotate(angle);

ຕອນນີ້ພວກເຮົາກຳລັງກຽມພຽງແຕ່ຂຽນຄວາມປະກອບຕັ້ງຢູ່ແບບບັນຊີ 0,0 ໃນແບບບັນຊີທີ່ປ່ຽນສະໝີ(ແລະຫັນດັງ):

ctx.fillRect(width / -2, height / -2, width, height);

ຫຼັງຈາກທີ່ພົບວ່າພວກເຮົາຕ້ອງໃຊ້ວິທີການ restore ເພື່ອກັບຄືນອຸບັດຕິເຫດພາບແບບນັ້ນໄປຫາຕອນການກັບຄືນ:

ctx.restore();

ຄວາມປະກອບນັ້ນແມ່ນຢ່າງດຽວທີ່ສາມາດຫັນດັງ:

ຄວາມປະກອບຄອມພິວເຕິກ

component ປະກອບວິທີການມີຊື່ angle ທີ່ເປັນປະສົມປະສານການສະໝີຂອງຄວາມປະກອບນັ້ນ.

component ຂອງປະກອບວິທີການ update ວິທີການທີ່ພວກເຮົາຂຽນຄວາມປະກອບຕັ້ງຢູ່ບ່ອນວ່າມັນສາມາດເຫັນວ່າມີການປ່ຽນສະໝີຂອງຄວາມປະກອບ:

ຄວາມປະກອບ

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

亲自试一试