Articles of html canvas

如何在JavaScript中显示二维数组的地图贴图?

我已经存储了我的地图,但是我遇到的问题是显示它。 我的地图是100×100的40x40px的瓷砖。 我有我的循环遍历数组,但我很难select地图图像的部分与瓷砖。 这是在每次迭代中select图像部分的代码: var sx = Math.floor(tileId % 8 * tileWidth); //source x var sy = Math.floor(tileId / 8 * tileHeight); //source y 我正在使用canvas,并不断收到此错误消息: INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value. 我猜测余数或8除是错误的,这是我从网上拿起来的东西,但是这个整数究竟是什么? 谢谢

等轴测地图中的Z轴

我正在试验JavaScript和HTML5 Canvas中的等角拼贴地图。 我正在JavaScript二维数组中存储瓷砖地图数据。 // 0 – Grass // 1 – Dirt // … var mapData = [ [0, 0, 0, 0, 0], [0, 0, 1, 0, 0, … ] 并绘制 for(var i = 0; i < mapData.length; i++) { for(var j = 0; j < mapData[i].length; j++) { var p = iso2screen(i, j, 0); // […]

平台变形运动和碰撞

我正在做一个平台游戏,但是我被卡在玩家的移动和碰撞。 现在我在运动中根本不包括网格,但现在是时候了。 我已阅读这篇文章如何做到这一点。 但是没有真正的代码例子只是理论。 我喜欢第二个例子,那就是我要去的那个。 我希望运动平稳,玩家应该能够在我的地图arrays中的两个方格之间运行。 这意味着我必须从arrays中获取信息,并根据该信息允许/禁止我的玩家朝这个方向移动。 而这就是我卡住的地方。 我的数组现在是一堆1和0。 我知道如何计算玩家周围的hitbox,但是如何以有效的方式将其与数组进行比较呢? 更新:我已经玩了一段时间了,我唯一想到的是使用像素的玩家X和Y,除以图块大小,并在地图上进行粗略估计。 然后,我通过添加它的宽度和高度来获得角落,使它成为AABB。 这显示出来是非常不可靠的,我真的需要一些帮助来解决这个问题。

Box2dWeb相对于HTML5 Canvas的定位

我是新的HTML5canvas和Box2DWeb,我正在尝试制作一个Asteroids游戏。 到目前为止,我认为我没有问题,但是我正在努力去理解的一件事是定位如何与canvas相关联。 我明白,Box2DWeb只是用来处理物理模拟,但我不知道如何处理在canvas上的定位。 canvas是100%的视口,因此可以改变大小。 我想填充一些小行星的屏幕,但如果我hardcore某些值,如bodyDef.position.x = Math.random()* 50; 小行星可能会出现在屏幕上的人较小的屏幕? 任何人都可以帮助我理解如何处理canvas上的相对位置?

我怎样才能在一个特定的位置在一个更大的位图上绘制一个小的位图? (Canvas / SurfaceView)

我正在构建一个游戏,需要为某些位图添加颜色混合。 假设我有4种不同types的对象,每种types都有十种不同的颜色。 如果这些对象重叠,我想在重叠的部分进行叠加混合。 在对这个主题做了一些研究后,我发现了这个关于绘图和添加混合的主题 。 它有很多有用的信息,但它不使用位图。 然后,我发现另一个关于混合来自两个位图的像素的线程,这也是有用的,但是基于相同大小的位图。 所以我解决这个问题的解决scheme是创建四个临时位图,每个对象types/颜色一个,这些位图的大小与设备屏幕大小相同。 我想将每种颜色的所有对象绘制到相关的位图上,所以在一个位图上的所有蓝色对象,在另一个位图上的所有橙色对象,依此类推。 然后,当所有的位图准备就绪时,我将在上面的链接上的四个相同大小的位图上进行叠加混合。 然后在canvas上绘制结果。 我唯一的问题是我不知道如何在较大的位置上正确放置较小的位图。 任何人都可以告诉我如何可以继续这样做?

HTML5canvas中的“绘画”元素

我正在用coffeescript做游戏(尽管为了这个问题可能不是所有相关的)和html5的canvas。 这是一个游戏,涉及一个油漆大炮,发射可以绘制关卡和玩家的元素的圆形油漆颗粒。 问题是我不知道如何完成这幅画。 下图说明了我想要完成的事情: 使用canvas,使用context.arc()绘制粒子,使用drawRect.arc()的球员和场地可以是任意的多边形,绘制代码如下: @drawingContext.beginPath(); tV = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[0])) @drawingContext.moveTo(tV.x, tV.y) for i in [1..@vertices.length – 1] v = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[i])) @drawingContext.lineTo(vx, vy) @drawingContext.lineTo(tV.x, tV.y) @drawingContext.closePath() @drawingContext.stroke() @drawingContext.fill() 跟踪应该涂在物体上的所有圆圈并且很快就会陷入停滞状态,每秒可能会有60个被剪切的圆圈被添加到物体的顶部。 最初的想法是把两个canvas叠在一起,然后我们可以画出一个水平,然后在有需要的时候画一个油漆图案,然后忘掉它(改变合成模式为source-atop得到适当的剪辑),因为我们不重绘它会留在那里。 但是,这不适用于移动物体(如玩家)(也可以相对于相机旋转和改变大小)。 我不知道该怎么做,因为所有的对象都是纯色的,所以没有纹理数据或者我们可以修改的东西。

如何处理不断增长的地图大小的负坐标2d地图

我喜欢这个程序式的生成理论,并且一直在搞乱它。 不过,我在包装我的地图数据时遇到了麻烦。 通常我将地图数据存储在二维数组中,并且在有限的空间内工作。 然而,随着玩家探索新领域,我的地图也在不断增长。 所以地图的大小会发生变化,而数组只会支持正数。 所以如果玩家试图向西或北方探索,他将陷入一个虚无的黑暗深渊。 但是我在这些方向上还有更多的地图。 不幸的是,这些是地图的负坐标部分。 当玩家探索新区域时,有没有办法支持负面的坐标? 这是一个在行动中的问题的例子。 https://76295db93db3812642fa5ba984c042fa81ffc37c.googledrive.com/host/0B6H3TRExU5M9eEkyd2FreHhiNlU/ 尝试向西或向北移动,你会碰到地图的边缘。

如何使用WebGL显示很多小对象?

介绍 游戏场景包含很多10×10像素的元素:为1980×1200像素。 屏幕上的元素数量可以在0到23760之间变化(元素不能相交)。 现场示例: http : //fintank.ru/game/ 由瓷砖组成的整个游戏空间:每个瓷砖负责某个区域并保留该区域的元素(类似于谷歌地图)。 每个贴片存在2个实体: S和G S是瓦片中的一组元素, G是瓦片的图像。 当服务器将元素放入/移除元素时,我们更改S ,然后重新渲染G 要绘制一个框架(20 fps),我只需要使用putImageData()来放置每个可见的tile的putImageData() 这是没有WebGL的。 这个问题 使用WebGL实现这种多元素管理的最有效的方法是什么? 我应该渲染每个瓷砖的纹理或每个元素可能被实现为一个单独的纹理矩形? 主要关心的是每个瓦片可能每秒更新30-60次(元素添加/删除)。 如何避免内存泄漏(如何重用缓冲区?),如果我们每秒都做出许多新的纹理? 渲染100×100拼贴的过程中操作像素的最有效方法是什么? 如何避免重新上传不变的纹理到graphics卡?

为什么我的canvas图比实际图片大?

对于下面的页面来源,我终于抓住了渲染卡片。 我很困惑为什么他们在canvas上出现大约2.5倍。 <html> <head> <style> canvas#game-canvas { position: absolute; top: 5%; left: 5%; background: lightblue; height: 281px; width: 500px; } body { background: darkblue; } </style> <script type="text/javascript" src="jquery1_10_2_min.js"></script> <script> // $(document).ready(function() { window.onload = function() { var canvas = document.getElementById("game-canvas"); var context = canvas.getContext("2d"); var cards = cardsheet('small_playing_cards.png', 50, 68); context.drawImage(cards[0], 10, 10); context.drawImage(cards[1], […]

jscanvas平铺地图 – for循环,while或matrix

我在canvas上做了一个自上而下的平铺地图,玩家总是在屏幕中间,根据你去哪里地图滚动,就像在moba游戏中一样。 我也希望它在每个方向无限循环。 这意味着,当我穿过地图的顶部边界时,我应该在地图的底部,当我穿过地图的左侧时,我应该最终在右侧等。同时,我只想在屏幕上可见的部分被渲染。 通常我只是使用for循环,但是当我在边界或地图的角落,我需要显示相同的地图,但另一端,它会变得复杂,嵌套循环很多。 我可以将地图制作成math.matrix,并执行多个操作来对其进行分片并排列,以便它仅表示屏幕上可见的部分,如下所示: 所以,当我处于底部瓷砖之一,例如我在屏幕的中心时,我需要用顶部瓷砖填充底部,由于地图比屏幕上显示的大,我还需要提取只有一部分要呈现。 但是这需要一些math函数,我不知道是否可以这样做。 这很难解释,尤其是在一个不是我的母语的语言,但我希望有人能帮助我。 什么是正确的方法来做到这一点?