Question

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var background = new Image();
var ground = new Image();
var canon_base = new Image();
var gun = new Image();
$(function() {
  var angleInDegrees = 0;

  var image = document.createElement("img");

  image.onload = function() {
    context.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.width / 2);
  }
  image.src = "images/gun.png";

  $("#clockwise").click(function() {
    angleInDegrees += 10;
    drawRotated(angleInDegrees);
  });

  $("#counterclockwise").click(function() {
    angleInDegrees -= 10;
    drawRotated(angleInDegrees);
  });

  function drawRotated(degrees) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(degrees * Math.PI / 180);
    context.drawImage(image, -image.width / 2, -image.width / 2);
    context.restore();
  }


});

background.onload = function() {
  context.drawImage(background, 0, 0);
  context.drawImage(ground, 0, 565);

  context.drawImage(canon_base, 10, 430);
  document.body.appendChild(canvas);
};


background.src = 'images/background.png';
ground.src = 'images/ground.png';
canon_base.src = 'images/canon_base.png';
// gun.src='images/gun.png';

<!doctype html>
<head>
  <title>HTML5 games workshop: One-screen platformer</title>
  <meta charset="utf-8">
  <!-- <script src="js/phaser.min.js"></script> -->
  <!-- <script src="js/jquery-3.1.1.min"></script> -->
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
  <canvas id="myCanvas" width="900" height="600" style="border:1px solid #000000;"></canvas>
  <div id="game">
    <button id="clockwise">Rotate right</button>
    <button id="counterclockwise">Rotate left</button>
  </div>
</body>

我正在尝试制作一个小游戏，因为我需要旋转一个炮炮。所以我在上面使用了jquery代码。它效果很好。但问题是当旋转图像和其他图像时它会旋转白色背景。我怎么能解决这个问题

怎么修复背景我丢失所有图像exept对象图像

0 个答案: