Articles of html canvas

在canvas上移除先前渲染的图像

我用ctx.clearRect和ctx.fillRect做了一个平台游戏,所以每次玩家移动时,我都会删除以前的位置并再次绘制他。 现在我正在将自己的作品导入到游戏中,并且在删除以前绘制的图像时遇到了问题。 我现在用来渲染播放器的一些代码示例: var playerReady = false; var playerImage = new Image(); playerImage.onload = function () { playerReady = true; }; playerImage.src = "images/player.png"; var render = function () { if (playerReady) { ctx.drawImage(playerImage, player.x, player.y); } }; 所以我想知道是否有任何类似的ctx.clearRect为ctx.drawImage或我可以做什么,我目前的解决方法是渲染整个背景的顶部先前绘制的背景+播放器,但这不是理想的我是什么试图做。 谢谢!

旋转canvas上的箭头

我需要根据用户的selectdynamic地绘制stream。 在这个stream程中,我想画出select(数字的蓝色圆圈)和select方向(线和箭头)。 例如:节点1到节点2。 JSFiddle示例 为了画出方向,我在最后画了一个箭头,但是我不能让箭头绕着它自己旋转。 JS代码 $(document).ready(function () { drawOnCanvas(); }); function drawOnCanvas() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); var circle1 = { x: 75, y: 75, r: 15 }; var circle2 = { x: 225, y: 50, r: 15 }; var arrow = { h: 5, w: 10 […]

为什么不能CSS Sprites处理vector?

几乎所有可用的文档都说“精灵是位图”,或者“精灵必须是位图”。 这是否有特定的原因? 实际上,是否可以创建一个带有.SVGs的css精灵表? 如果可能的话,这是一个好主意,并且是所有浏览器都支持的SVG格式? 我正在用欧洲民间传说的元素创建一个强有力的简约艺术风格的HTML5游戏。 我本身不需要vector图像,但我更喜欢游戏尽可能快地提高用户体验,并允许在不同设备上玩游戏。 一个例子字符。 正如你所看到的,没有细节可以用光栅图像更好地performance出来。

如何检查一个正方形是否与HTML5canvas中的另一个正方形重叠

我有一个这样的小程序: 每当有人按下空格,就会出现一个蓝色方块。 蓝色正方形不应与其他任何蓝色正方形重叠。 但是检查重叠的function是不行的! 有人可以帮忙吗? window.onload = function() { //Starts the program when the page is loaded. var canvas = document.getElementById("paper"); var background = canvas.getContext("2d"); var squareDisplay = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var xAndYvaluesOfSquares = []; //Makes a randint() function. function randint(min, max) { return Math.floor(Math.random() * (max – min + 1)) […]

屏幕上有数百个canvas对象是否正常?

我使用html5来构建游戏,它基于Canvas而不是webGL。 我试图从canvas对象而不是从图像构建精灵。 因为在屏幕上会有许多精灵,每个精灵都有不同的大小和移动方向,所以我会使用许多canvas对象。 我想知道是否可以在浏览器屏幕上放置如此多的canvas对象。 这会使游戏非常慢吗?

创建同一个对象的多个实例,并只select一个

我正在玩弄一个益智游戏,在我遇到第一个问题之前,没有做太多的事情。 我想创建一定数量的相同的对象/function。 但是没有硬编码的不同情况。 我想也许arrays是一个好主意? 然后一个for循环push的对象? 然后我需要能够通过点击select这些对象之一,我将如何做到这一点? 我怎么知道arrays中的哪个球被点击了? 再次循环? 我做了一个jsFiddle的例子(你需要点击橙色的球来select,然后你可以通过点击canvas来移动它)。 这是我想要做的,但有更多的球。 你将如何解决这个问题?

如何在canvas上创建一个图像数组

我正在开发一个游戏,使用不同的图像。当我的图像被刷到屏幕的底部它消失了,一个新的图像出现在顶部。看到你不能删除一个单独的图像我想清除canvas和重绘来自一组图像的图像。 我的问题是你如何创建一个可以从onDraw方法访问的数组?

使用javascript制作完美的恒定游戏animation

我尝试了不同的方法来使用JavaScript和HTML来制作不断的animation。 问题是他们从来都不是完美的。 如果我想每移动一个正方形5个像素每50毫秒我将使用该代码: var leftPosition = 0; function move() { leftPosition += 5; document.getElementById("square").style.left = leftPosition + "px"; } window.onload = function() { setInterval(move, 50); }; 我的意思不完美的是,在这个过程中,广场有时会稍微加快或者减速。 要注意你必须真的注意移动animation。 我已经尝试使用requestAnimationFrame但发生了同样的事情。 有没有办法改进它?

你需要制作一个平台吗?

我的任务是制作一个平台,我从来没有做过平铺的游戏,这是必要的吗? 也就是说,我可以创建一个Sprite类的不同子类,并将它们添加到地图上,添加自己的function? 我使用HTML5canvas和JS,如果这有所作为。

HTLM5帆布游戏(easeljs)在手机上的ipad(ios7)上运行缓慢

我已经开发了一个用于HTML5canvas的easeljs游戏。 该游戏是一个单一的HTML5页面与canvas和大量的JavaScript。 所有这一次,我通过本地服务器在iOS Safari(iPad3 iOS7)上以40〜50 fps的速度testing应用程序。 当我用手机打包一个xcode应用程序时,它接近10fps变得难以置信。当我将页面添加到主屏幕时,我注意到了相同的行为。 有什么办法可以使ipad(iOS7)的HTML5canvas应用游戏的良好performance?