Articles of html canvas

如何在Android中旋转移动的canvas

我正在开发一个Android游戏。 在这个游戏中,一些列车正在轨道上移动。 我可以使用水平列车和垂直列车的两个列车图像分别水平和垂直列车。 现在,我想把一个正在水平轨道上的火车移动到垂直轨道上,我想把它变成可视化的,因为它正在转弯并在垂直轨道上前进。 我该如何做到这一点,我是否需要为每个像素使用如此多的图像,或者还有其他的方式来打开火车吗? 请建议。

HTML5 Canvas游戏中的多个setInterval

我试图在我使用Canvas创建的游戏中实现多个animation(这是一个简单的乒乓游戏)。 这是我的第一场比赛,我是新来的canvas,但之前已经创建了一些实验,所以我对canvas的工作有很好的了解。 首先,看看这里的游戏。 问题是,当球击中桨时,我想要在接触点产生一个n粒子的爆发,但是这不是正确的。 即使我将粒子数设置为1,他们只是继续从接触点来,然后在一段时间后自动隐藏。 另外,我想每次碰撞都有爆发,但是只发生在第一次碰撞时。 我在这里粘贴代码: //Initialize canvas var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), W = window.innerWidth, H = window.innerHeight, particles = [], ball = {}, paddles = [2], mouse = {}, points = 0, fps = 60, particlesCount = 50, flag = 0, particlePos = {}; canvas.addEventListener("mousemove", trackPosition, true); //Set it's height […]

HTML5 Canvas深度sorting

我有等轴测图的问题。 我不知道如何命名这个“问题”,但我向你展示了我得到的东西和我需要得到的东西。 我的代码现在绘制如下: http : //2.bp.blogspot.com/_rqhF_8E1nlA/R59d_PmoREI/AAAAAAAAAGo/3yHpmy55moc/s400/lore2.png 但我需要画这样的东西:http: //3.bp.blogspot.com/_rqhF_8E1nlA/R59epfmoRFI/AAAAAAAAAGw/cE_o-A0bvm0/s400/lore3.png 我听说这是“深度sorting”,但它是什么? 我怎么可以适用于我的代码,我可以学习这个? 我的代码:'http://jsdo.it/keichioor/exU1

如何初始化一个BitmapDrawable Android

我一直在为我的android游戏玩家使用shapeDrawable对象,但现在我想添加一些graphics,我必须使用不同的东西我正在考虑一个BitmapDrawable,但因为我是新来的,我不知道如何初始化这些sorting的类,或如何从游戏资源中获取图像,任何人都可以把我放在正确的轨道上,或指向我一些有用的教程。

帆布等轴测平移到整数坐标

我正在用等角游戏板创建一个基于canvas的游戏。 我使用下面的转换来获得我的方块在屏幕上呈现: 'applyViewportTransformation' : function() { context.translate(this.settings.camera_x, this.settings.camera_y); }, 'applyIsometricTilt' : function() { context.scale(1, this.settings.tilt_ratio); // Rotating the grid around it's center. context.translate(this.settings.pixel_grid_width / 2, this.settings.pixel_grid_height / 2); context.rotate(Grid.degreesToRadians(45)); context.translate(-this.settings.pixel_grid_width / 2, -this.settings.pixel_grid_height / 2); }, 我的问题是我现在喜欢在这样不翻译的特定瓷砖上呈现的元素。 我还需要能够将鼠标点击映射到等距绘制的元素等。 所以据我所知,我需要一个公式才能进入电网,并有一个公式才能走出电网。 在math上,我迷路了,也有点惊呆了2d上下文没有简单地将这些转换应用到一组坐标的公共方法。 帮助将不胜感激。 编辑,如果有人想要看一看源代码或者想建议一些编辑,你可以在github上查看源代码 。

从点a移动到点b,并确定精度

假设我在a(0,0)处有一个圆圈,我希望将它移到b(23,58),不管怎么样,如果我想要的话,我怎样才能准确地做到这一点呢? (我正在做这个JavaScript)。 我所做的每一个尝试都会导致它抖动(因为准确性是closures的)有人建议夹紧,但我不知道如何做到这一点,甚至在哪里甚至想弄清楚如何。 任何来源,例子,参考资料,指南,教程…正确地解释它,无论是否是一个难题,是赞赏。 如果有帮助,我使用鼠标点击确定我应该移动对象的位置(自上而下): if (char.end.x != char.start.x || char.end.y != char.start.y) { char.distance = {}; char.distance.x = char.end.x – char.start.x; char.distance.y = char.end.y – char.start.y; char.distance.hypot = Math.sqrt( char.distance.x * char.distance.x + char.distance.y * char.distance.y ); char.distance.moves = char.distance.hypot / char.speed; char.start.x += Math.floor(char.distance.x/char.distance.moves); char.start.y += Math.floor(char.distance.y/char.distance.moves); }

我可以使用翻译function来实现一个视口吗?

我阅读了这个伟大的问题以及关于在一个自顶向下的2D游戏中渲染一个视口的相当好的答案 : 至于实际绘制相机可以“看到”的物体,现在绘制所有相对于相机世界坐标的物体。 要计算一个物体相对于相机的屏幕位置,只需要: int screenX, screenY; //screen position of the object being drawn screenX = object.x-camera.x; screenY = object.y-camera.y; 思考object.coord – camera.coord这个object.coord – camera.coord ,改变我渲染的每一个地方,首先运行这个object.coord – camera.coord方程将是非常有object.coord – camera.coord 。 我想知道这是否可以在首先转换坐标系的一个非侵入步骤中完成。 我在html5canvas上渲染,这个翻译function说: 将上下文的原点移动到(x,y)。 我有麻烦虽然可视化。 这是否意味着我只需将(-camera.x, -camera.y)插入到函数中? 我应该使用翻译函数来渲染一个视口,还是有一个很好的理由来对我渲染的每一个东西应用这个等式?

在Spritesheet中编码旋转或在运行时旋转效率更高?

我正在开发一个JavaScript和HTML5游戏,我想知道精灵旋转对性能的影响。 我知道旋转精灵有两种方法: 当它沿着它的轨迹行进时,根据它的旋转速度和速度旋转实际的精灵。 预先计算旋转并将它们作为帧存储在精灵表格中,以便给出幻觉,当它不在时,旋转。 一方面,我可以看到如何旋转一个spritesheet中的一些精灵将是有效的,因为它是一个图像被加载,拆分成框架,并重新使用。 但另一方面,我不确定基于其速度和旋转速度的精灵旋转计算对于当前浏览器(在计算机和移动设备上)是否真的担心。 在我的游戏中,canvas面积为800 x 600,游戏中使用的是32 x 32的精灵。 “地图”不是基于图块的。 以上两个选项中,哪个对运行时性能更有效?

使用html5canvas处理一个精灵图表图像中的多个animation状态

我最近使用html5canvas创建一个游戏。玩家有多个状态,它可以走跳跃踢和多个其他国家我的问题是简单的,但经过一些深入的研究,我找不到处理这些多个国家的最佳方式是我的jsfiddle: http : //jsfiddle.net/Z7a5h/5/ 我设法做了一个animation,但我以凌乱的方式开始我的代码,任何人都可以给我一个方法来处理一个精灵图像的多个状态animation,或者只是给一个有用的链接跟随和理解它的概念。你的帮助 if (!this.IsWaiting) { this.IsWaiting = true; this.lastRenderTime = now; this.Pos = 1 + (this.Pos + 1) % 3; } else { if (now – this.lastRenderTime >= this.RenderRate) this.IsWaiting = false; }

我怎样才能使EaselJS的歪斜像帆布一样行事?

EaselJS中的位图的倾斜属性(以角度给出)旋转图像,使其也变平。 我想倾斜它,而不像canvas那样“挤压”它。 JSFiddles,来演示: 帆布歪斜 | EaselJS歪斜