Articles of html canvas

用鼠标在htmlcanvas上绘制/添加形状对象

我已经从链接的帆布涂料教程开始,它可以稍后修复几个问题,工作正常。 我一直在检查canvas上的很多贴图,但是他们都使用drawloop函数或间隔,但是我不想使用draw(); 在现在的时间间隔或gameloop中,我只需要更新userinput上的内容。 我正在尝试创建绘制对象而不是位图的绘图软件。 我一直在debugging一段时间,并找不到问题:我有问题访问的对象在pointsArr[]; arrays。 我只能使用contextVar.strokeRect(50,50,50,50);将矩形添加到屏幕上contextVar.strokeRect(50,50,50,50); 直接用mouseDownVar到目前为止。 是的,我知道addFilledCircleFunc创建矩形,现在我只想要一切工作正常。 // to do: // add gameloop and draw with gameloop? // stroke line in resize fix // collission check + detection objects // functions to draw detection objects // implement resize? // Varibale declration var canvasVar = document.getElementById('canvasHtmlElement'); var contextVar = canvasVar.getContext('2d'); var pointRadiusVar = 10; […]

Android canvas.drawColor抛出一个空的对象引用

我有两个几乎完全相同的方法,第一个是在资源加载时绘制启animation面,第二个是将所有资源绘制到屏幕上。 第一个在这一行中抛出一个NullPointerException: canvas.drawColor(Color.argb(255, 0, 0, 0)); 这是我的错误: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.graphics.Canvas.drawColor(int)' on a null object reference 10-19 21:54:56.042 18973-18973/? E/AndroidRuntime: at com.xyz.123.GameView.drawSplash(GameView.java:76) 这里是我的代码完整: package com.xyz.123; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.view.MotionEvent; import android.view.SurfaceHolder; import android.view.SurfaceView; public class GameView extends SurfaceView implements Runnable { volatile boolean […]

Facebook的canvas(networking)桌面和移动浏览器的游戏

正如标题所暗示的那样 – 我即将为FBcanvas开发一款游戏。 游戏是否支持移动和桌面?还是我必须为此创建两个不同的项目/游戏设置? 谢谢

在相位器中使用canvasgraphics而不是传统的小精灵

我正在尝试学习Phaser(总共有初学者和轻度的JS经验),我正在学习如何使用精灵的教程。 我试图让基本的canvas形状,而不是创建精灵,但我有困难在一些情况下实施他们。 我有一个工作的球员形状: var playerGraphic = this.game.add.graphics(100, 100); // set a fill and line style playerGraphic.beginFill(0x555555); playerGraphic.lineStyle(2, 0xffffff, 0.5); // draw a shape playerGraphic.drawCircle(0, 0, 20); playerGraphic.drawCircle(5, 5, 10); this.player = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, null); this.player.addChild(playerGraphic); 但我不确定这是否是正确的做法。 我也在努力让平铺的背景工作,因为它似乎不像上面那样工作: this.game.background = this.game.add.tileSprite(0, 0, this.game.world.width, this.game.world.height, null); this.game.background.addChild(bgGraphic); 任何建议/帮助?

如何跟随(中心)canvas元素内的一个框

如果在一个canvas里面画一个盒子,然后我加上箭头移动它,那么这个盒子就会出现在我的范围之外,因为它离开了边界,我看不到它。 我怎么能跟着盒子,这样它总是在中心?

如何解决我的物理function,使他们在不同的FPS上以相同的速度执行

我的跳转function看起来像 – self.jump = function(){ //do the initial jump if (self.pressingUp && self.onGround) { //this just gets it off the ground self.gravitate_then_time = (new Date).getTime(); self.velocityY = -self.jumpPower; self.onGround = false; } } 然后当玩家在空中时,它被一个叫做gravitate的函数拉下来 – self.gravitate = function(floor){ //check to see if the ball is in the air if(self.centerY + self.diameter/2 < floor){ var now_time […]

像素逐像素碰撞检测弹球

我目前正在使用HTML5 Canvas和JavaScript在弹球游戏中工作。 现在我正在逐像素碰撞,这是根本的,因为脚蹼很难。 现在我的包围盒碰撞似乎正在工作 checkCollision(element) { if (this.checkCollisionBoundingBox(element)) { console.log("colision with the element bounding box"); if (this.checkCollisionPixelByPixel(element)) { return true; } else { return false; } } else { return false; } } checkCollisionBoundingBox(element) { if (this.pos.x < element.pos.x + element.width && this.pos.x + this.width > element.pos.x && this.pos.y < element.pos.y + element.height && this.pos.y […]

检测多个移动物体的碰撞

我已经写了一个简单的游戏,有100个球弹跳在canvas的边界。 每个球是ball函数的一个实例,具有以下定义: var cnv = document.getElementById("mycanvas"); var ctx = cnv.getContext("2d"); … … function ball() { // at instantiation, set the ball in a random position this.x = parseInt(Math.random()*cnv.width) +1; this.y = parseInt(Math.random()*cnv.height) +1; this.size = parseInt(Math.random() * 10) + 1; // and give the ball a random speed at a random direction this.x_speed = parseInt(Math.random()*10) […]

使用HTML5创建等轴测图地图

我正在尝试使用HTML5 Canvas创建一个等轴测地图。 我在网上find的所有东西都指向了使用预先构建的引擎。 我想学习如何做到这一点,而不使用引擎。 是否有可能做到这一点? 如果是这样,怎么样? 我需要看看WebGL吗?

如何水平地翻转不同尺寸的精灵?

我正在用TexturePacker打包的这个纹理图集在HTML5 Canvas上制作一个animation: 当角色面向右侧时,它会很好运作。 我试着水平翻转它,但是得到错误的位置: 这是我现在的代码,每帧都有一个偏移值来修复位置: <canvas id="c" width="200" height="100" style="background: #000"></canvas> var metaData = [ {x:0,y:0,w:35,h:38,offsetX:3,offsetY:9}, {x:37,y:0,w:31,h:37,offsetX:6,offsetY:10}, {x:70,y:0,w:65,h:47,offsetX:0,offsetY:1}, {x:137,y:0,w:65,h:47,offsetX:0,offsetY:1}, {x:204,y:0,w:61,h:46,offsetX:1,offsetY:1}, {x:267,y:0,w:42,h:46,offsetX:1,offsetY:1}, {x:311,y:0,w:43,h:44,offsetX:1,offsetY:3}, {x:356,y:0,w:38,h:37,offsetX:6,offsetY:10}, {x:396,y:0,w:35,h:34,offsetX:6,offsetY:13}, {x:433,y:0,w:33,h:37,offsetX:7,offsetY:10}, {x:468,y:0,w:36,h:40,offsetX:5,offsetY:7}, {x:506,y:0,w:34,h:39,offsetX:6,offsetY:8} ], dx = 0, //position x dy = 0, //position y index = 0; //frame index (function draw() { context2D.clearRect(0,0,c.width,c.height); var cur = metaData[index]; if(facingRight) { context2D.drawImage( img, […]