如何使用 globalCompositeOperation 绘制不同的图像

问题描述

我最近尝试使用瓷砖制作世界地图游戏，因此，我希望图像具有不同的颜色，例如，瓷砖作为国家/地区的颜色。所以， globalCompositeOperation 对所有图像应用相同的颜色，我做错了什么？我认为问题出在 fillRect(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,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,"#000000",Tiles[i].BorderImage);
      DrawImage(i * 300 + 300,Tiles[i].width,Tiles[i].height,"#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,height);
    Context.restore();
    Context.globalCompositeOperation = "source-in";
    Context.fillStyle = color;
    Context.fillRect(0,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">

解决方法

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

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

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

canvas drawimage html javascript