为什么我的球不是圆弧？ [英] Why is my ball not round with arc?
本文介绍了为什么我的球不是圆弧？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在javascript中做一个小游戏。但现在在开始我的圈子不圆...我不知道该做什么后搜索20分钟。在网上。希望你们能帮助我。
我的问题是：为什么我的圈子不完美？
div class =snippetdata-lang =jsdata-hide =false>
function Canvas（）{var ctx = document.getElementById（'game'）。getContext（'2d'）; var cw = ctx.canvas.width，ch = ctx.canvas.height; var snelheid = 1;函数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;背景颜色： ; border-style：solid; border-width：4px; border-radius：4px; border-color：＃A2A2A9; }
< html>< head> head>< body> < canvas id =game>请获得一个新的浏览器！ < / 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;函数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;背景颜色： ; border-style：solid; border-width：4px; border-radius：4px; border-color：＃A2A2A9; } < canvas id =gamewidth = 500height =500>请获取新浏览器！< / canvas>
大小作为canvas元素的HTML属性，但你也可以从JS这样在你的情况下：
var canvas = document.getElementById（'game'）;
canvas.width = 500; //不同于canvas.style.width
canvas.height = 500; //不同于canvas.style.height
这里有一个使用CSS大小来缩放整个画布并保持其比例的示例：
function Canvas（）{var ctx = document.getElementById （'game'）。getContext（'2d'）; var cw = ctx.canvas.width，ch = ctx.canvas.height; var snelheid = 1;函数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;背景颜色： ; border-style：solid; border-width：4px; border-radius：4px; border-color：＃A2A2A9; } < canvas id =gamewidth = 500height =500>请获取新浏览器！< / canvas>
I am trying to make a little game in javascript. But now at the start my circle is not round... I don`t know what to do after searching for 20 min. on the internet. Hopefully you guys can help me.
My question is: Why is my circle not perfect round?
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>
解决方案
You need to set the canvas (the element) width and height, just CSS is not enough and it will cause scaling (which could be used on purpose). See this:
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>
I set the size as HTML attributes of the canvas element, but you can also do it from JS like this in your case:
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
Here's an example of using CSS size to scale the whole canvas and keep it proportional:
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>
这篇关于为什么我的球不是圆弧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
