如何在不同屏幕尺寸的浏览器窗口的最右侧定位HTML Canvas fillRect（）

Question

基本上，我有一个从右到左的广场动画。由于我不知道我将使用什么屏幕尺寸来展示我的作品，因此无法为起始位置硬编码起始x位置值（例如sqrx = 1400）。如果动画在更大的屏幕上播放到我的状态开发时，浏览器窗口会更大，因此动画将从屏幕中间开始。

TLDR：设置从右到左移动动画的起始X位置，无论浏览器窗口有多大/小，都会捕捉到浏览器窗口的右边缘。

var canvasWidth = c.width();
var canvasHeight= c.height();

//Vars to allow buttons to work for reset functionality
var playAnimation= true;
var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
//Start position of Square
var sqrx = 1310; 

//Animation timer
function animate(){
    sqrx--;
    ctx.clearRect(0,0,canvasWidth, canvasHeight);
    ctx.fillRect(sqrx,700,40,50);
    setTimeout(animate,33);
//save state when the cavnas is first drawn.
    ctx.save();
};
animate();

Answer 1

如果你能给画布，窗口的宽度和高度，那么无论你使用哪种设备都能获得窗口屏幕大小的值，它会更容易：

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

为其大小指定矩形值：

var rect_size = 50;

这样可以更容易地将矩形放置在画布中。

function draw(){
   ctx.beginPath();
   ctx.fillStyle = "red";
   ctx.fillRect(width - rect_size , 0 , rect_size , rect_size);
   ctx.fill();
}
draw();