我正在尝试用 javascript 制作一个小游戏。但现在一开始我的圈子不是圆的......我不知道在搜索 20 分钟后该怎么做。在互联网上。希望你们能帮助我。
我的问题是:为什么我的圆不是正圆？
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var snelheid = 1;
function bal() {
this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
this.draw = function() {
//animation
this.x = this.x + 1;
//draw
ctx.beginPath();
ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
}
function background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
}
var bal = new bal();
var background = new background();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
bal.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, snelheid);
}
window.addEventListener('load', function(event) {
Canvas();
}); #game {
width: 500px;
height: 500px;
background-color: ;
border-style: solid;
border-width: 4px;
border-radius: 4px;
border-color: #A2A2A9;
}<html>
<head>
</head>
<body>
<canvas id="game">
Please get a new browser!
</canvas>
</body>
<html>最佳答案
您需要设置 Canvas (元素)的宽度和高度，仅 CSS 是不够的，它会导致缩放(可以故意使用)。看这个:
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var snelheid = 1;
function bal() {
this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
this.draw = function() {
//animation
this.x = this.x + 1;
//draw
ctx.beginPath();
ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
}
function background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
}
var bal = new bal();
var background = new background();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
bal.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, snelheid);
}
window.addEventListener('load', function(event) {
Canvas();
}); #game {
width: 500px;
height: 500px;
background-color: ;
border-style: solid;
border-width: 4px;
border-radius: 4px;
border-color: #A2A2A9;
}<canvas id="game" width="500" height="500">
Please get a new browser!
</canvas>我将大小设置为 canvas 元素的 HTML 属性，但你也可以在你的情况下从 JS 中这样做:
var canvas = document.getElementById('game');
canvas.width = 500; // not the same as canvas.style.width
canvas.height = 500; // not the same as canvas.style.height
这是一个使用 CSS 大小来缩放整个 Canvas 并保持其比例的示例:
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var snelheid = 1;
function bal() {
this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
this.draw = function() {
//animation
this.x = this.x + 1;
//draw
ctx.beginPath();
ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
}
function background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
}
var bal = new bal();
var background = new background();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
bal.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, snelheid);
}
window.addEventListener('load', function(event) {
Canvas();
}); #game {
width: 250px;
height: 250px;
background-color: ;
border-style: solid;
border-width: 4px;
border-radius: 4px;
border-color: #A2A2A9;
}<canvas id="game" width="500" height="500">
Please get a new browser!
</canvas>关于javascript - 为什么我的球不是圆弧形的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28879254/