我知道那里有关于那个问题的帖子，我试图应用答案但不知何故它对我不起作用。长话短说：我想使用全屏画布，但如果我这样做，分辨率真的很低。这就是为什么我想首先画一个小画布，然后调整大小。但显然我的脚本做错了，因为它没有重新调整到全屏。每一个提示都会非常开心！
<!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>
在“全屏”（也就是这里的视口大小）绘制太简单了：
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>扩展到全屏时，此代码段可能不会更新，因此请尝试使用额外的文件...