为什么三角形不清晰？

Question

I have a question, why doesn't the triangle clear here?我有一个问题，为什么这里的三角形不清晰？

Here is the image:这是图像：

Here is the JSFIddle这是JSFIddle

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Basic styling, centering the canvas -->
    <style>
      canvas {
        position: absolute;
        top: 20px;
        bottom: 0px;
        left: 250px;
        right: 0px;
      }

    </style>
  </head>

  <body>
    <canvas id="game" width="500" height="500"></canvas>

    <script>
      $(document).ready(function() {
        var loadcount = 0;
        var loadtotal = 0;
        var preloaded = false;
        var WIDTH = 500;
        var HEIGHT = 500;
        var keys = {};
        var canvas = document.getElementById('game');
        var ctx = canvas.getContext('2d');
        var images = loadImages(["spaceship.png"]);


        var player = {
          x: null,
          y: null,
          width: 40,
          height: 40,
          speed: 5,
          update: function() {

            if (keys[39]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.x += this.speed;
            }
            if (keys[37]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.x -= this.speed;
            }
            if (keys[38]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.y -= this.speed;
            }
            if (keys[40]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.y += this.speed;
            }

            //Checks if it is out of Bounds
            if (this.x > WIDTH - this.width) {
              this.x = WIDTH - this.width;


            }
            if (this.x < 0) {
              this.x = 0;

            }
            if (this.y > HEIGHT - 15) {
              this.y = HEIGHT - 15;

            }
            if (this.y < 0) {

              this.y = 0;

            }

          },
          draw: function() {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = 'blue'
            ctx.moveTo(this.x, this.y);
            ctx.lineWidth = 16;
            ctx.lineTo(this.x + 15, this.y + 25);
            ctx.lineTo(this.x - 15, this.y + 25);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
          }

        }


        function main() {

          document.addEventListener("keydown", function(event) {
            keys[event.keyCode] = true;
          })

          document.addEventListener("keyup", function(event) {
            delete keys[event.keyCode];
          })


          init();

          var loop = function() {
            update();
            draw();
            window.requestAnimationFrame(loop, canvas);
          };
          window.requestAnimationFrame(loop, canvas);
        }



        function init() {

          player.x = (WIDTH / 2);
          player.y = (HEIGHT / 2) + 150;
        }

        function draw() {

          //Drawing the Square

          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, HEIGHT);
          ctx.lineTo(HEIGHT, WIDTH);
          ctx.lineTo(WIDTH, 0)
          ctx.lineTo(0, 0)
          ctx.stroke();

          player.draw();
        }

        function update() {

          player.update();
        }

        function loadImages(imagefiles) {
          // Initialize variables
          loadcount = 0;
          loadtotal = imagefiles.length;
          preloaded = false;

          // Load the images
          var loadedimages = [];
          for (var i = 0; i < imagefiles.length; i++) {
            // Create the image object
            var image = new Image();

            // Add onload event handler
            image.onload = function() {
              loadcount++;
              if (loadcount == loadtotal) {
                // Done loading
                preloaded = true;
              }
            };

            // Set the source url of the image
            image.src = imagefiles[i];

            // Save to the image array
            loadedimages[i] = image;
          }

          // Return an array of images
          return loadedimages;
        }




        main();

      })

    </script>
  </body>

</html>

Answer 1

While using clearRect , clear entire canvas使用clearRect时，清除整个画布

Try this:试试这个：

 $(document).ready(function() { var loadcount = 0; var loadtotal = 0; var preloaded = false; var WIDTH = 500; var HEIGHT = 500; var keys = {}; var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var images = loadImages(["spaceship.png"]); var player = { x: null, y: null, width: 40, height: 40, speed: 5, update: function() { if (keys[39]) { ctx.clearRect(0, 0, WIDTH, HEIGHT); this.x += this.speed; } if (keys[37]) { ctx.clearRect(0, 0, WIDTH, HEIGHT); this.x -= this.speed; } if (keys[38]) { ctx.clearRect(0, 0, WIDTH, HEIGHT); this.y -= this.speed; } if (keys[40]) { ctx.clearRect(0, 0, WIDTH, HEIGHT); this.y += this.speed; } //Checks if it is out of Bounds if (this.x > WIDTH - this.width) { this.x = WIDTH - this.width; } if (this.x < 0) { this.x = 0; } if (this.y > HEIGHT - 15) { this.y = HEIGHT - 15; } if (this.y < 0) { this.y = 0; } }, draw: function() { ctx.save(); ctx.beginPath(); ctx.strokeStyle = 'blue' ctx.moveTo(this.x, this.y); ctx.lineWidth = 16; ctx.lineTo(this.x + 15, this.y + 25); ctx.lineTo(this.x - 15, this.y + 25); ctx.closePath(); ctx.stroke(); ctx.restore(); } } function main() { document.addEventListener("keydown", function(event) { keys[event.keyCode] = true; }) document.addEventListener("keyup", function(event) { delete keys[event.keyCode]; }) init(); var loop = function() { update(); draw(); window.requestAnimationFrame(loop, canvas); }; window.requestAnimationFrame(loop, canvas); } function init() { player.x = (WIDTH / 2); player.y = (HEIGHT / 2) + 150; } function draw() { //Drawing the Square ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, HEIGHT); ctx.lineTo(HEIGHT, WIDTH); ctx.lineTo(WIDTH, 0) ctx.lineTo(0, 0) ctx.stroke(); player.draw(); } function update() { player.update(); } function loadImages(imagefiles) { // Initialize variables loadcount = 0; loadtotal = imagefiles.length; preloaded = false; // Load the images var loadedimages = []; for (var i = 0; i < imagefiles.length; i++) { // Create the image object var image = new Image(); // Add onload event handler image.onload = function() { loadcount++; if (loadcount == loadtotal) { // Done loading preloaded = true; } }; // Set the source url of the image image.src = imagefiles[i]; // Save to the image array loadedimages[i] = image; } // Return an array of images return loadedimages; } main(); });

 canvas { position: absolute; top: 20px; bottom: 0px; left: 250px; right: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="game" width="500" height="500"></canvas>

Fiddle here在这里摆弄

为什么三角形不清晰？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-12-20 02:26:08

为什么三角形不清晰？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-12-20 02:26:08

解决方案1
0 已采纳 2015-12-20 02:26:08