在画布javascript中剪切位移

编程问答 2022-04-21

问题描述

我正在尝试创建一个带有画布的二维棋盘游戏以供练习。 我们的目标是制作一个只有 html、javascript 和 PHP 的游戏。

我制作了第一个画布，它占据了整个画板。 目前我的第二个画布，包含一个圆形 pawn，它可以移动以及使用 clip () 方法进行裁剪。 我的问题涉及第二个画布。我希望能够确保我的剪裁遵循 pawn 的位置。 但是我无法移动剪辑，因此它停留在同一个位置，导致我的 pawn 出现然后消失。

你能告诉我如何移动这个剪辑吗？

提前致谢。

const goUp = 1;
const godown = 2;
const goLeft = 3;
const goRight = 4;

var canvas = document.getElementById("pawn");
var ctx = canvas.getContext("2d");

var largeurProprietee = 60;
var hauteurProprietee = 90;
x = 45 + 90 + (8 * 60) + 90;
y = 30;
orientation = 1;
pawnHeight = 40;
pawnWidth = 40;

function drawPawn() {
  var image = new Image();
  image.src = 'img/' + 'zelda' + '/' + 'vert' + '.png'; //adresse de l'image
  image.onload = function() {
    ctx.drawImage(this,y,x,pawnHeight,pawnWidth);
  }
}

function shifting() {
  erasePrevIoUs();
  cutOut();
  drawPawn();
  x--;
}

function erasePrevIoUs() {

  var prevIoUsX;
  var prevIoUsY;

  if (orientation == 1) {
    prevIoUsX = x;
    prevIoUsY = y;
    ctx.clearRect(prevIoUsY,prevIoUsX,pawnWidth);
  }
}

function cutOut() {

  var rayon = (pawnHeight / 2);
  var clipX = (x + rayon);
  var clipY = (y + rayon);

  ctx.beginPath();
  ctx.arc(clipY,clipX,rayon,Math.PI * 2);
  ctx.clip();
}

setInterval(shifting,10);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

clipdynamicdynamicdynamichtmlhtml5-canvasjavascript