Javascript HTML5画布-动态背景&x2B；元素定位

我正在尝试编写一个html5画布小游戏，在动态背景大小和对象定位方面遇到了一些困难——也许我的想法有点错误，但我希望你能帮助我。 这是我的密码：

var canvas=document.getElementById（“背景”）；
var c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var background=新图像（）；
background.src=”https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg";
函数scaleToFill（img）{
//拿秤
var scale=Math.max（canvas.width/background.width、canvas.height/background.height）；
c、 drawImage（img，0，0，background.width*比例，canvas.height）；
}
background.onload=函数（）{
scaleToFill（本）；
c、 fillRect（100100100100）；
}

正文{
保证金：0；
填充：9；
宽度：100%；
身高：100%；
}
帆布{
边框：1px实心#000；
}

---

一旦你走上这条路线，一切都必须与宽度和高度成比例或相对

请参见下面的示例，我仍然在绘制一个矩形，就像您使用绝对位置时所做的那样
但我也在画布中间画了一个圆圈

如果你正在创造一个游戏，你将不得不做出那些决定什么是相对的，什么不是相对的

var canvas=document.getElementById（“背景”）；
var c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var background=新图像（）；
background.src=”https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg";
background.onload=函数（）{
var scale=Math.max（canvas.width/background.width、canvas.height/background.height）；
c、 drawImage（this，0，0，background.width*比例，canvas.height）；
//绝对位置
c、 fillRect（10,10,50,50）；
//相对大小的固定位置
c、 fillRect（10、80、1000*刻度，200*刻度）；
//固定半径相对位置
c、 弧（canvas.width/2，canvas.height/2，50，0，Math.PI*2）；
c、 笔划（）
}

---

一旦你走这条路线，一切都必须与宽度和高度成比例或相对

请参见下面的示例，我仍然在绘制一个矩形，就像您使用绝对位置时所做的那样
但我也在画布中间画了一个圆圈

如果你正在创造一个游戏，你将不得不做出那些决定什么是相对的，什么不是相对的

var canvas=document.getElementById（“背景”）；
var c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var background=新图像（）；
background.src=”https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg";
background.onload=函数（）{
var scale=Math.max（canvas.width/background.width、canvas.height/background.height）；
c、 drawImage（this，0，0，background.width*比例，canvas.height）；
//绝对位置
c、 fillRect（10,10,50,50）；
//相对大小的固定位置
c、 fillRect（10、80、1000*刻度，200*刻度）；
//固定半径相对位置
c、 弧（canvas.width/2，canvas.height/2，50，0，Math.PI*2）；
c、 笔划（）
}