0
私はそこにその質問の投稿があることを知っています。回答を適用しようとしましたが、どういうわけかそれは私のためには機能しません。長い話ですが、私はフルスクリーンのキャンバスを使用したいと思いますが、そうした場合、解像度は本当に低くなります。だから私はまず小さなキャンバスを描き、サイズを変更したかったのです。しかし、明らかに、全画面にリサイズしないので、私は自分のスクリプトで間違ったことをしています。すべてのヒントのために絶対に幸せになるだろう！あまりにも（ここでは、ビューポートのサイズを意味する） "フルスクリーン" で描く解像度を上げるためにキャンバスサイズを変更する
<!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>
％ではなくピクセルでサイズを設定しようとしましたか？ – user7393973
ありがとうございます。私はちょうど試しましたが、私には何も変わりません（最近のChromeを使ってテストしています）。 – MrSomething
[this]（https://i.imgur.com/Fsz2yai.png）の結果は得られますか？ – user7393973