Question

我知道那里有关于那个问题的帖子，我试图应用答案但不知何故它对我不起作用。长话短说：我想使用全屏画布，但如果我这样做，分辨率真的很低。这就是为什么我想首先画一个小画布，然后调整大小。但显然我的脚本做错了，因为它没有重新调整到全屏。每个提示都会非常高兴！

<!DOCTYPE html>
<html>
   <head>
      <title>Test</title>
      <style>
         * { margin: 0; padding: 0;}
         body, html { height:100%; }
         #myCanvas {
         position:absolute;
         width:100;
         height:100;
         }
      </style>
      <script>

         function resize(canvas) {
         // Lookup the size the browser is displaying the canvas.
         var displayWidth  = canvas.clientWidth;
         var displayHeight = canvas.clientHeight;

         // Check if the canvas is not the same size.
         if (canvas.width  != displayWidth ||
         canvas.height != displayHeight) {

         // Make the canvas the same size
         canvas.width  = displayWidth;
         canvas.height = displayHeight;
         }
         }

         function drawFixation() {

         var c=document.getElementById("myCanvas");
         var ctx=c.getContext("2d");
         var centerX = c.width / 2;
         var centerY = c.height / 2;  
         ctx.beginPath();
         ctx.strokeStyle = "#FFFFFF";
         ctx.moveTo(centerX-5,centerY);
         ctx.lineTo(centerX+5,centerY);
         ctx.moveTo(centerX,centerY+5);
         ctx.lineTo(centerX,centerY-5);
         ctx.fillStyle ="#FFFFFF"
         ctx.lineWidth = 2;
         ctx.stroke();
         }


         function drawArrow(fromx, fromy, tox, toy, colourarrow){
             //variables to be used when creating the arrow
             var c = document.getElementById("myCanvas");
             var ctx = c.getContext("2d");
             var headlen = 3;

             var angle = Math.atan2(toy-fromy,tox-fromx);

             //starting path of the arrow from the start square to the end square and drawing the stroke
             ctx.beginPath();
             ctx.moveTo(fromx, fromy);
             ctx.lineTo(tox, toy);
             ctx.strokeStyle = colourarrow;
             ctx.lineWidth = 5;
             ctx.stroke();

             //starting a new path from the head of the arrow to one of the sides of the point
             ctx.beginPath();
             ctx.moveTo(tox, toy);
             ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

             //path from the side point of the arrow, to the other side point
             ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));

             //path from the side point back to the tip of the arrow, and then again to the opposite side point
             ctx.lineTo(tox, toy);
             ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

             //draws the paths created above
             ctx.strokeStyle = colourarrow;
             ctx.lineWidth = 5;
             ctx.stroke();
             ctx.fillStyle = colourarrow
             ctx.fill();
         }

      </script>
   </head>
   <body bgcolor='black'>
      <canvas  id="myCanvas" oncl></canvas>
      <script>
         var differentcolours = ['#FFA500','#FFFF00','#FF0000','#FFA500'];
         drawFixation();
         for (i=0; i<4; i++) {
         drawArrow(i*10, i*10, i*20, i*20, differentcolours[i]);
         } 
          resize(myCanvas);
      </script>              
   </body>
</html>

Answer 1

在“全屏”处绘制（这意味着视口大小）非常简单：

canvas.width = innerWidth;
canvas.height = innerHeight;

这段代码似乎对我有用：

<!DOCTYPE html>
<html>
   <head>
      <title>Test</title>
      <style>
         * { margin: 0; padding: 0;}
         body, html { height:100%; }
         #myCanvas {
         position:absolute;
         }
      </style>
      <script>

         function drawFixation() {

         var c=document.getElementById("myCanvas");
         var ctx=c.getContext("2d");
         var centerX = c.width / 2;
         var centerY = c.height / 2;  
         ctx.beginPath();
         ctx.strokeStyle = "#FFFFFF";
         ctx.moveTo(centerX-5,centerY);
         ctx.lineTo(centerX+5,centerY);
         ctx.moveTo(centerX,centerY+5);
         ctx.lineTo(centerX,centerY-5);
         ctx.fillStyle ="#FFFFFF"
         ctx.lineWidth = 2;
         ctx.stroke();
         }


         function drawArrow(fromx, fromy, tox, toy, colourarrow){
             //variables to be used when creating the arrow
             var c = document.getElementById("myCanvas");
             var ctx = c.getContext("2d");
             var headlen = 3;

             var angle = Math.atan2(toy-fromy,tox-fromx);

             //starting path of the arrow from the start square to the end square and drawing the stroke
             ctx.beginPath();
             ctx.moveTo(fromx, fromy);
             ctx.lineTo(tox, toy);
             ctx.strokeStyle = colourarrow;
             ctx.lineWidth = 5;
             ctx.stroke();

             //starting a new path from the head of the arrow to one of the sides of the point
             ctx.beginPath();
             ctx.moveTo(tox, toy);
             ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

             //path from the side point of the arrow, to the other side point
             ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));

             //path from the side point back to the tip of the arrow, and then again to the opposite side point
             ctx.lineTo(tox, toy);
             ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

             //draws the paths created above
             ctx.strokeStyle = colourarrow;
             ctx.lineWidth = 5;
             ctx.stroke();
             ctx.fillStyle = colourarrow
             ctx.fill();
         }

      </script>
   </head>
   <body bgcolor='black'>
      <canvas  id="myCanvas" oncl></canvas>
      <script>
         var canvas = document.getElementById("myCanvas");
         canvas.width = innerWidth;
         canvas.height = innerHeight;
         var differentcolours = ['#FFA500','#FFFF00','#FF0000','#FFA500'];
         drawFixation();
         for (i=0; i<4; i++) {
         drawArrow(i*10, i*10, i*20, i*20, differentcolours[i]);
         } 
      </script>              
   </body>
</html>

在扩展到全屏时，此代码段可能不会更新，因此请尝试使用额外的文件...

调整画布大小以获得更好的分辨率

1 个答案: