2

我最近尝试使用图块制作世界地图游戏，因此，我希望图像具有不同的颜色，例如，将图块作为国家的颜色。那么，globalCompositeOperation 将相同的颜色应用于所有图像，我做错了什么？我认为问题出在 fillRect(0, 0, Canvas.width, Canvas.height) 中，因为它是画布的大小，并且适用于所有图像，但我认为将正方形设为大小图像的它不会有用，因为边框的某些部分会与该框发生碰撞。

顺便说一句，这是代码：

var Canvas = document.getElementById("MainCanvas");
  var Context = Canvas.getContext("2d");
  var Tiles = [
    {
      Name: "Gibraltar",
      x: 8990,
      y: 5020,
      width: 10,
      height: 10,
      Image: "https://piskel-imgstore-b.appspot.com/img/41fbbcc7-abfe-11eb-8bc6-5f48ab91e43b.gif",
      BorderImage: "https://piskel-imgstore-b.appspot.com/img/77d149a8-abfe-11eb-8aaa-5f48ab91e43b.gif"
    },
    {
      Name: "Cádiz",
      x: 8950,
      y: 4960,
      width: 100,
      height: 120,
      Image: "https://piskel-imgstore-b.appspot.com/img/a7c79a9c-abfe-11eb-b096-5f48ab91e43b.gif",
      BorderImage: "https://piskel-imgstore-b.appspot.com/img/efa2e1b3-abfe-11eb-8589-5f48ab91e43b.gif"
    }
  ];
  var Camera = {
    x: 0,
    y: 0,
    Zoom: 100
  };
  function Start()
  {
    setInterval(Update, 10);
    
  }
  function Update()
  {
    Render();
  }
  function Render()
  {
    Context.clearRect(0, 0, Canvas.width, Canvas.height);
    Canvas.width = Camera.Zoom * 10;
    Canvas.height = Camera.Zoom * 5.62;
    for(let i = 0; i != Tiles.length; i++)
    {
      DrawImage(i * 300 + 300, 200, Tiles[i].width + 20, Tiles[i].height + 20, 0, "#000000", Tiles[i].BorderImage);
      DrawImage(i * 300 + 300, 200, Tiles[i].width, Tiles[i].height, 0, "#ff0000", Tiles[i].Image);
    }
  }
  //Drawing Functions
  function DrawImage(x, y, width, height, angle, color, imgsrc)
  {
    let CurrentImage = new Image();
    CurrentImage.src = imgsrc;
    Context.save();
    Context.translate(x, y);
    Context.rotate(angle);
    Context.drawImage(CurrentImage, width / -2, height / -2, width, height);
    Context.restore();
    Context.globalCompositeOperation = "source-in";
    Context.fillStyle = color;
    Context.fillRect(0, 0, Canvas.width, Canvas.height);
    Context.globalCompositeOperation = "source-over";
  }
  //Start Button Functions to work
  var StartButton = document.getElementById("StartButton");
  StartButton.addEventListener("mouseout", function()
  {
    StartButton.style.width = "100px";
    StartButton.style.height = "56px";
    StartButton.style.fontSize = "30px";
    StartButton.style.border = "8px solid #0f0f0f";
  });
  StartButton.addEventListener("mouseover", function()
  {
    StartButton.style.width = "110px";
    StartButton.style.height = "62px";
    StartButton.style.fontSize = "33px";
    StartButton.style.border = "8.5px solid #0f0f0f";
  });
  StartButton.addEventListener("click", function()
  {
    StartButton.style.width = "130px";
    StartButton.style.height = "73px";
    StartButton.style.fontSize = "39px";
    StartButton.style.border = "10px solid #0f0f0f";
    setTimeout(function()
    {
      StartButton.remove();
      Start();
    }, 50);
  });
#MainCanvas
  {
    background-color:#f0f0f0;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid #0f0f0f;
    border-radius: 10px;
    image-rendering: crisp-edges;
    width: 1000px;
    height: 562px;
  }
  #StartButton
  {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    border: 8px solid #0f0f0f;
    border-radius: 8px;
    width: 100px;
    height: 56px;
    font-size: 30px;
    font-family: 'Akaya Kanadaka', cursive;
    text-align: center;
  }
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <canvas id="MainCanvas"></canvas>
    <button id="StartButton">PLAY</button>
  </body>
</html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap" rel="stylesheet">

4

0 回答 0