个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试用 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/
26
4
0
我正在尝试让角色以弧形向目标扔东西。 我知道顶点(x，y)和目标(x，y)，我想得到一条从原点(x，y)到目标的最大高度为 vertex.y 的弧 我所拥有的是基于 y = a(x-h)^2 + k
我正在使用 html5 canvas 创建财富之轮。它与填充样式颜色配合得很好。我想要随机切片填充样式图案中的两(2)个不同图像。我如何实现这一目标。 这是我的 JS function rand(mi
我不明白为什么我需要在某些 block 中有一个弱的 self ，而其他的似乎工作正常。 如果我在 Notification block 中没有对 self 的弱引用，dealloc 将不会被释放。不
我正在尝试弄清楚如何在极坐标图中的两点之间创建弧线，但我绘制的线是连接它们的直线，即使该图是极坐标。 我需要使用其他绘图函数来代替 ax.plot 吗？ 我注意到 matplotlib 中有一些补丁，
我正在尝试在 d3 中创建一个半圆。使用 cardinal interpolation产生一条接近我想要的路径，但不够“圆形”。如何编写自己的插值器来更好地绕过这条路径，或者有更好的方法吗？ 这是我目
我正在开发一个启用 ARC 的项目。我正在从 View Controller 中推送 MyClass， - (void)pushMyClass { MyClass *myClass = [[
我有四点。它是可拖动的。在任何时候我点击“绘制”按钮我想显示 Angular 。我尝试过，但它会在外面画出陡峭 Angular 弧线。但我想在形状内的任意点绘制圆弧。 $(document).read
我正在尝试为 Android 设备修改操纵杆组件。目前该组件能够跟踪您手指的 x 和 y 位置并在那里绘制一个小圆圈。现在我要做的是从中心到手指的 x 和 y 位置绘制一个矩形或圆弧。 据我所知，矩形
有没有人有在 svgwrite (python) 中完成的弧形切片(奶酪切片或吃 bean 人)的工作示例，我已经尝试过这个，试图获得一个从 (100,100) 开始的西北象限，但得到一个奇怪的形状:
我正在开发一个 iPad(仅限)应用程序，我偶然发现了一个奇怪的问题。该应用程序在 iPad 1 上出现内存警告后终止，但在 iPad 2 上运行正常。我正在使用 ARC 并以 iOS 5 为目标。我
dealloc(下)会释放静态变量exampleString指向的NSString吗？ // ExampleClass.h @interface ExampleClass : NSObject @
我正在尝试使用 WPF 在 Canvas 上绘制导入的 DXF 文件。我一直在使用 DXFLib(可用 here)来读取和解析各种文件，它似乎工作得很好。 我现在正在绘制 DXF 中的所有实体，但我受
我正在使用 NSManagedObjects，我想返回任务的预算或任务类别的预算。 但是，该方法给出了错误: Implicit conversion of int to Budget * is dis
我正在使用 JQuery.path沿贝塞尔曲线移动对象。单击该项目时，我可以确定起点和终点。如何计算 Angular 和长度，使元素在与起点和终点相交的 1/4 圆弧上从 A 点移动到 B 点？ 我基
当转换到 ARC 时，我收到以下编译器错误:“删除未使用的自动释放消息是不安全的”。 如果我简单地删除自动释放消息，obj 将在 getAutoreleasedObj 结束时立即被释放，这将导致 pr
我是 Instruments 的新手，但我之前已经成功地找到了漏洞。这一次，不是这样——每次我调用这段代码时都会有 34MB 的泄漏!我试图在下面发布所有相关代码，同时删除 DDLogging 等内容
我正在从手动内存管理过渡到 ARC，但遇到了问题。大多数时候，我通过在我的模型类中调用 performSelectorInBackground 来异步执行数据加载。问题是当模型收到 nil(发布)时，
我正在尝试将项目转换为使用 ARC。 我有一个这样的声明属性: @property (nonatomic, retain, setter=setSomeProperty:) SomeClass * s
在关于为特定类禁用 ARC 编译器机制的 stackoverflow 主题之后，我将 -fno-objc-arc 参数添加到 Compile Sources 部分(TARGETS 项目中的 Buil
考虑这个 ARC 代码: - (void)main { NSString *s = [[NSString alloc] initWithString:@"s"]; [NSApp beg
我是一名优秀的程序员,十分优秀！