Search Results

Search found 1513 results on 61 pages for 'canvas'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 9/61 | < Previous Page | 5 6 7 8 9 10 11 12 13 14 15 16  | Next Page >

  • Jquery canvas touch count

    - by user897764
    Can someone help me with a script I'm working with. http://jsfiddle.net/InVAMPED/XsG4e/4/ What I'm trying to achieve is placing a image where the user touches(ipad). There will be say 5 images that will each get attached once only. So first touch places img1, second touch imag2 etc untill all the images have been placed. Problem with my fsfiddle example is that when on ipad it doesnt count the first touch so you place the first image twice. it does duplicate the image on the second time just moves it to the second touches coordinates, then move on to 2, 3, 4, 5 as it should. any advice? or help to do this a better way? thanks

    Read the article

  • Jump and run HTML5 Game Framework

    - by user1818924
    We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice: we have a "Stage" object, which represents the root of our game and is a global div-wrapper. The stage can contain multiple "Scenes", which are also div-elements. We would implement a Scene for the playing task, for pause, etc. and switch between them. Each scene can therefore contain multiple "Layers", representing a canvas. These Layer contain "ObjectEntities", which represent images or other shapes like rectangles, etc. Each Objectentity has its own temporaryCanvas, to be able to draw images for one entity, whereas another contains a rectangle. We set an activeScene in our Stage, so when the game is played, just the active scene is drawn. Calling activeScene.draw(), calls all sublayers to draw, which draw their entities (calling drawImage(entity.canvas)). But is this some kind of good practive? Having multiple canvas to draw? Each gameloop every layer-context is cleared and drawn again. E.g. we just have a still Background-Layer, … wouldn't it be more useful to draw this once and not to clear it everytime and redraw it? Or should we use a global canvas for example in the Stage and just use this canvas to draw? But we thought this would be to expensive... Other question: Do you have any advice how we could dive into implementing an own framework? Most stuff we find online relies on existing frameworks or they just implement their game without building a framework.

    Read the article

  • Android, how important is deltaTime?

    - by iQue
    Im making a game that is getting pretty big and sometimes my thread has to skip a frame, so far I'm not using deltaTime for setting the speed of my different objects in the game because it's still not a big enough game for it to matter imo. But its getting bigger then I planned, so my question is, how important is delta Time? If I should use delta time there is a problem, since speedX and speedY are integers(they have to be for eclipse to let you make a rectangle of them), I cant add delta time very functionally as far as I understand, but might be wrong? Ive tried adding deltaTime to the code below, and sometimes my enemies just not move after spawn, they just stand there and run in the same place Will add an some code for how I set / use speed: public void update(int dx, int dy) { double theta = 180.0 / Math.PI * Math.atan2(-(y - controls.pointerPosition.y), controls.pointerPosition.x - x); x +=dx * Math.cos(Math.toRadians(theta)); y +=dy * Math.sin(Math.toRadians(theta)); currentFrame = ++currentFrame % BMP_COLUMNS; } public void draw(Canvas canvas) { int srcX = currentFrame * width; int srcY = 1 * height; Rect src = new Rect(srcX, srcY, srcX + width, srcY + height); Rect dst = new Rect(x, y, x + width, y + height); canvas.drawBitmap(bitmap, src, dst, null); } So if someone with some experience with this has any thoughts, please share. Thank you! Changed code: public void update(int dx, int dy, float delta) { double theta = 180.0 / Math.PI * Math.atan2(-(y - controls.pointerPosition.y), controls.pointerPosition.x - x); double speedX = delta * dx * Math.cos(Math.toRadians(theta)); double speedY = delta * dy * Math.sin(Math.toRadians(theta)); x += speedX; y += speedY; currentFrame = ++currentFrame % BMP_COLUMNS; } public void draw(Canvas canvas) { int srcX = currentFrame * width; int srcY = 1 * height; Rect src = new Rect(srcX, srcY, srcX + width, srcY + height); Rect dst = new Rect(x, y, x + width, y + height); canvas.drawBitmap(bitmap, src, dst, null); } with this code my enemies move like before, except they wont move to the right (wont increment x), all other directions work.

    Read the article

  • Repeat a part of spritesheet as background

    - by Moiblpadde
    So I'm trying to repeat a part of my spritesheet as a background (js, canvas). My code so far: var canvas = $("#board")[0], ctx = canvas.getContext("2d"), sprite = new Image(); sprite.src = "spritesheet.png"; sprite.onload = function(){ ctx.fillStyle = ctx.createPattern(spriteBg, "repeat"); ctx.fillRect(0, 25, 500, 500); } This is fine, but as you can see, it repeat the whole sprite, not just a part of it, and I just can't figure out how to do it D:

    Read the article

  • place and show pixel in the Cartesian plane graph in JavaFX

    - by user3671803
    I have this method to draw the Cartesian plane in JavaFX, using canvas and would like to know if it is possible to place or show the pixel: public class Grafics extends StackPane { private Canvas canvas; public void Grafics(){ GridPane grid = new GridPane(); grid.setPadding(new Insets(5)); grid.setHgap(10); grid.setVgap(10); canvas = new Canvas(); canvas.setHeight(500); canvas.setWidth(700); GridPane.setHalignment(canvas, HPos.CENTER); grid.add(canvas, 0, 2); GraphicsContext gc = canvas.getGraphicsContext2D(); gc.setFill(Color.BLACK); gc.fillRect(0, 0, canvas.getWidth(), canvas.getHeight()); gc.setFill(Color.WHITE); gc.fillRect(1, 1, canvas.getWidth() - 2, canvas.getHeight() - 2); drawAxesXY(gc); //call the method drawAxes getChildren().addAll(grid);// add an gridpane in stackpane } private void drawAxesXY(GraphicsContext gc1) { PixelWriter pixelWriter = canvas.getGraphicsContext2D().getPixelWriter(); gc1.setFill(Color.WHITE); gc1.setStroke(Color.BLACK); gc1.setLineWidth(1.5); gc1.strokeText("Y", 350, 30); gc1.scale(1, 1); gc1.translate((canvas.getHeight() / 50) - (canvas.getWidth() / 10), canvas.getHeight() / 50); gc1.strokeLine(canvas.getWidth() - 300, canvas.getWidth() - 300, canvas.getHeight() - 100, canvas.getHeight() / 30); pixelWriter.setColor(300, 300, Color.RED); gc1.strokeText("X", 620, 220); gc1.translate(canvas.getWidth() - (canvas.getHeight() / 10), -220); gc1.rotate(90.0); gc1.setFill(Color.WHITE); gc1.setStroke(Color.RED); gc1.setLineWidth(1.5); gc1.strokeLine(canvas.getWidth() - 250, canvas.getWidth() - 250, canvas.getHeight() - 50, canvas.getHeight() / 30); pixelWriter.setColor(620, 220, Color.RED); } } I put a line black and the other red http://postimg.org/image/tewjhco4z/ and I wanna know if is possible to place or show the pixel in Figure like this http://postimg.org/image/98k9mvnb3/

    Read the article

  • Android: How to do this framing paint?

    - by iDroid Explorer
    I Have Some static images like below: Now, I want is, when i touch on the face or hand, then the selected color should be fill on that skin portion. See below image of result: So how to get the result like above ?? Redo and Undo Functionality Should be also there. I have try with the FloodFill color but doing that i can only able to do color in to the perticular portion. as FloodFill only fill the color till the same pixwl color comes. If the touch place pixel color get change the it will not fill color on it. So Usinf FloodFill i got the result like below image, If i press on the hand, then only hand portion will fill with color, instead of it i want to fill color to the other hand and face also. So Please help me in this case. EDITED After some reply i got the solution like this one. But still there is a memory issue. It consume lots of memory to draw the color. So please can anyone help me for it ?

    Read the article

  • How to rotate html5 canvas as page background?

    - by Sebastian P.R. Gingter
    Hi, I want to achieve the following: Image a white sheet of paper on a black desk. Then rotate the paper a little bit to the left (like, 25 degrees). Now you still have the black desk, and a rotated white box on it. In this rotated white box I want to place non-rotated normal html content like text, tables, div's etc. I already have a problem at the very first step: rotating a rectangle. This is my code so far: <html> <head> <script> function draw() { var canvas=document.getElementById("myCanvas"); var c=canvas.getContext("2d"); c.fillStyle = '#00'; c.fillRect(100, 100, 100, 100); c.rotate(20); c.fillStyle = '#ff0000'; c.fillRect(150, 150, 10, 10); } </script> </head> <body onload="draw()"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> </html> With this, I see only a normal black box. Nothing else. I assume there should be a red, rotated box too, but there's nothing. What is the best approach to reach this and to have it as a (scaling) background for my web page?

    Read the article

  • To canvas, or not to canvas, when building browser-based games?

    - by Letharion
    Background: I have extensive development background, but the last time I coded a game was many years ago. My Javascript skills are quite limited, and I intend to improve them by building a simple game — Tetris, Pac-man, or something of that complexity level. Question: It seems to me that a fundamental choice I need to make is whether I should render on a <canvas> element or not. With a canvas, I have basic tools for rendering points, lines, and more complex things on top of that. Presumably there are, or will be, also various frameworks to help with this. Without a canvas, I could keep my objects in the DOM-tree, like a regular webpage, only quite complex, with many overlapping elements. Is one approach better than the other? Are they mutually exclusive? How do I know which to pick?

    Read the article

  • How would one rotate an image around itself using Canvas?

    - by Wolfr
    I'm having trouble roating an image around itself using Canvas. Since you can't rotate an image you have to rotate the canvas: if I rotate the canvas by a degree the origin around which I want to rotate changes. I don't get how to track this change. This is my current code: http://pastie.org/669023 And a demo is at http://preview.netlashproject.be/cog/ If you want to give things a shot the zipped up code and image is at http://preview.netlashproject.be/cog/cog.zip

    Read the article

  • How to get HTML5 canvas text to show html entity?

    - by mrollinsiv
    I'm parsing an xml file that stores image/caption data both of which I need to display on my canvas. However occasionally there's an entity in the file and when drawing the text to the canvas it interprets it as flat text. How can i get &copy; to show up as © on the canvas? Is this even possible, or does anyone know of a good work around?

    Read the article

  • How do I attach event bindings to items on a canvas using Tkinter?

    - by Ian
    If I'm using a canvas to display data and I want the user to be able to click on various items on the canvas in order to get more information or interact with it in some way, whats the best way of going about this? Searching online I can find information about how to bind events to tags but that seems to be more indirect then what I want. I don't want to group items with tags, but rather have specific function calls when the user clicks specific items on the canvas.

    Read the article

  • How do I rotate a single object on an html 5 canvas?

    - by Kappers
    I'm trying to figure out how to rotate a single object on an html 5 canvas. For example: http://screencast.com/t/NTQ5M2E3Mzct - I want each one of those cards to be rotated at a different degree. So far, all I've seen are articles and examples that demonstrate ways to rotate the entire canvas. Right now, I'm guessing I'll have to rotate the canvas, draw an image, and then rotate the canvas back to it's original position before drawing the second image. If that's the case, then just let me know! I just have a feeling that there's another way. Anyone have any idea? Thanks in advance!

    Read the article

  • An html5 canvas element in the background of my page?

    - by fx42
    Is it possible to have a full screen canvas element in the background of a webpage and "normal" markup elements like a table in front of it? like the following snippet (if it wouldn't be used as alternative content): <canvas id=&#34;imageView&#34; width=100%; height=100%;> <table>...</table> </canvas>

    Read the article

  • Rotating an image in all browsers (canvas in IE?)

    - by Tom
    I finally got to work with canvas only to find out that it is not implemented in IE. I tried explore canvas from google to use it in Internet Explorer, but it's not working for my code (http://uptowar.com/test.php - little bug though that it is not removing the old image when rotating). So, is there an other way to smoothly rotate an image around it's bottom center angle? Maybe javascript? Or is there a way to do it with IE and canvas anyway? Edit: Google Chrome also seems to add an ugly border to the canvas example.. there must be an other smooth way? Edit2: tried a hacky javascript way: it causes mayor lags and corrupts the image (http://uptowar.com/test2.php), anyone knows of a working method?

    Read the article

  • Am I going about this the right way?

    - by Psytronic
    Hey Guys, I'm starting a WPF project, and just finished the base of the UI, it seems very convoluted though, so I'm not sure if I've gone around laying it out in the right way. I don't want to get to start developing the back-end and realise that I've done the front wrong, and make life harder for myself. Coming from a background of <DIV's and CSS to style this is a lot different, and really want to get it right from the start. Essentially it's a one week calendar (7 days, Mon-Sunday, defaulting to the current week.) Which will eventually link up to a DB and if I have an appointment for something on this day it will show it in the relevant day. I've opted for a Grid rather than ListView because of the way it will work I will not be binding the results to a collection or anything along those lines. Rather I will be filling out a Combo box within the canvas for each day (yet to be placed in the code) for each event and on selection it will show me further details. XAML: <Window x:Class="WOW_Widget.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:Extensions="clr-namespace:WOW_Widget" DataContext="{Binding RelativeSource={RelativeSource Self}}" Title="Window1" Height="239" Width="831" <Window.Resources <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1" <GradientBrush.GradientStops <GradientStopCollection <GradientStop Offset="1.0" Color="White"/ <GradientStop Offset="0.0" Color="LightSlateGray"/ </GradientStopCollection </GradientBrush.GradientStops </LinearGradientBrush <LinearGradientBrush x:Key="grdDayHeader" StartPoint="0,0" EndPoint="0,1" <GradientBrush.GradientStops <GradientStopCollection <GradientStop Offset="0.0" Color="Peru" / <GradientStop Offset="1.0" Color="White" / </GradientStopCollection </GradientBrush.GradientStops </LinearGradientBrush <LinearGradientBrush x:Key="grdToday" StartPoint="0,0" EndPoint="0,1" <GradientBrush.GradientStops <GradientStopCollection <GradientStop Offset="0.0" Color="LimeGreen"/ <GradientStop Offset="1.0" Color="DarkGreen" / </GradientStopCollection </GradientBrush.GradientStops </LinearGradientBrush <Style TargetType="{x:Type GridViewColumnHeader}" <Setter Property="Background" Value="Khaki" / </Style <Style x:Key="DayHeader" TargetType="{x:Type Label}" <Setter Property="Background" Value="{StaticResource grdDayHeader}" / <Setter Property="Width" Value="111" / <Setter Property="Height" Value="25" / <Setter Property="HorizontalContentAlignment" Value="Center" / </Style <Style x:Key="DayField" <Setter Property="Canvas.Width" Value="111" / <Setter Property="Canvas.Height" Value="60" / <Setter Property="Canvas.Background" Value="White" / </Style <Style x:Key="Today" <Setter Property="Canvas.Background" Value="{StaticResource grdToday}" / </Style <Style x:Key="CalendarColSpacer" <Setter Property="Canvas.Width" Value="1" / <Setter Property="Canvas.Background" Value="Black" / </Style <Style x:Key="CalendarRowSpacer" <Setter Property="Canvas.Height" Value="1" / <Setter Property="Canvas.Background" Value="Black" / </Style </Window.Resources <Grid Background="{StaticResource NormalBrush}" <Border BorderBrush="Black" BorderThickness="1" Width="785" Height="86" Margin="12,12,12,104" <Canvas Height="86" Width="785" VerticalAlignment="Top" <Grid <Grid.ColumnDefinitions <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / <ColumnDefinition / </Grid.ColumnDefinitions <Grid.RowDefinitions <RowDefinition / <RowDefinition / <RowDefinition / </Grid.RowDefinitions <Label Grid.Column="0" Grid.Row="0" Content="Monday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="1" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="2" Grid.Row="0" Content="Tuesday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="3" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="4" Grid.Row="0" Content="Wednesday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="5" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="6" Grid.Row="0" Content="Thursday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="7" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="8" Grid.Row="0" Content="Friday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="9" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="10" Grid.Row="0" Content="Saturday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="11" Grid.RowSpan="3" Grid.Row="0" Style="{StaticResource CalendarColSpacer}" / <Label Grid.Column="12" Grid.Row="0" Content="Sunday" Style="{StaticResource DayHeader}" / <Canvas Grid.Column="0" Grid.ColumnSpan="13" Grid.Row="1" Style="{StaticResource CalendarRowSpacer}" / <Canvas Grid.Column="0" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblMondayDate" / </Canvas <Canvas Grid.Column="2" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblTuesdayDate" / </Canvas <Canvas Grid.Column="4" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblWednesdayDate" / </Canvas <Canvas Grid.Column="6" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblThursdayDate" / </Canvas <Canvas Grid.Column="8" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblFridayDate" / </Canvas <Canvas Grid.Column="10" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblSaturdayDate" / </Canvas <Canvas Grid.Column="12" Grid.Row="2" Margin="0" Style="{StaticResource DayField}" <Label Name="lblSundayDate" / </Canvas </Grid </Canvas </Border <Canvas Height="86" HorizontalAlignment="Right" Margin="0,0,12,12" Name="canvas1" VerticalAlignment="Bottom" Width="198"</Canvas </Grid </Window CS: public partial class Window1 : Window { private DateTime today = new DateTime(); private Label[] Dates = new Label[7]; public Window1() { DateTime start = today = DateTime.Now; int day = (int)today.DayOfWeek; while (day != 1) { start = start.Subtract(new TimeSpan(1, 0, 0, 0)); day--; } InitializeComponent(); Dates[0] = lblMondayDate; Dates[1] = lblTuesdayDate; Dates[2] = lblWednesdayDate; Dates[3] = lblThursdayDate; Dates[4] = lblFridayDate; Dates[5] = lblSaturdayDate; Dates[6] = lblSundayDate; FillWeek(start); } private void FillWeek(DateTime start) { for (int d = 0; d < Dates.Length; d++) { TimeSpan td = new TimeSpan(d, 0, 0, 0); DateTime _day = start.Add(td); if (_day.Date == today.Date) { Canvas dayCanvas = (Canvas)Dates[d].Parent; dayCanvas.Style = (Style)this.Resources["Today"]; } Dates[d].Content = (int)start.Add(td).Day; } } } Thanks for any tips you guys can give Psytronic

    Read the article

  • How to convert X/Y position to Canvas Left/Top properties when using ItemsControl

    - by kshahar
    I am trying to use a Canvas to display objects that have "world" location (rather than "screen" location). The canvas is defined like this: <Canvas Background="AliceBlue"> <ItemsControl Name="myItemsControl" ItemsSource="{Binding MyItems}"> <ItemsControl.ItemTemplate> <DataTemplate> <Canvas> <TextBlock Canvas.Left="{Binding WorldX}" Canvas.Top="{Binding WorldY}" Text="{Binding Text}" Width="Auto" Height="Auto" Foreground="Red" /> </Canvas> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Canvas> MyItem is defined like this: public class MyItem { public MyItem(double worldX, double worldY, string text) { WorldX = worldX; WorldY = worldY; Text = text; } public double WorldX { get; set; } public double WorldY { get; set; } public string Text { get; set; } } In addition, I have a method to convert between world and screen coordinates: Point worldToScreen(double worldX, double worldY) { // return screen coordinates using the canvas properties and an internal MapData object } With the current implementation, the items are positioned in the wrong location, because their location is not converted to screen coordinates. How can I apply the worldToScreen method on the MyItem objects before they are added to the canvas?

    Read the article

  • Why does my health bar disappear whenever my character takes amage?

    - by iQue
    Im making health bar for my game that looks like this: public void healthBar(Canvas canvas) { float healthScale = happy.getHP() / happy.getMaxHP(); Rect rect = new Rect(20, 20,(120 * (int)healthScale), 40); Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawRect(20, 20, 220 * healthScale, 40, paint) } this is called every time my game renders. When the game starts it's where I want it, but as soon as my character (happy) takes any damage, it dissapears. And I know that his hp only gets subtracted by 5 every time he gets hit. So this should not happen? example: @Startup: happy.getHP() == 100, happy.getMaxHP == 100. when damaged HP -=5, -> happy.getHP() == 95 -> healthscale == 0,95 -> 220 * 0,95 == new width for Rect(?)

    Read the article

  • Zoom in on a point (using scale and translate)

    - by csiz
    I want to be able to zoom in on the point under the mouse in canvas with the mouse whell, like when zooming on maps.google. I'd like straight code as I've been working on this for 5h+ Something to start with: <canvas id="canvas" width="800" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var scale = 1; var originx = 0; var originy = 0; function draw(){ context.fillStyle = "white"; context.fillRect(originx,originy,800/scale,600/scale); context.fillStyle = "black"; context.fillRect(50,50,100,100); } setInterval(draw,100); canvas.onmousewheel = function (event){ var mousex = event.clientX - canvas.offsetLeft; var mousey = event.clientY - canvas.offsetTop; var wheel = event.wheelDelta/120;//n or -n var zoom = 1 + wheel/2; scale *= zoom; originx += 0;//??? originy += 0;//??? context.scale(zoom,zoom); context.translate(0,0);//??? } </script>

    Read the article

  • Drawing on a webpage – HTML5 - IE9

    - by nmarun
    So I upgraded to IE9 and continued exploring HTML5. Now there’s this ‘thing’ called Canvas in HTML5 with which you can do some cool stuff. Alright what IS this Canvas thing anyways? The Web Hypertext Application Technology Working Group says this: “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” The Canvas element has two only attributes – width and height and when not specified they take up the default values of 300 and 150 respectively. Below is what my HTML file looks like: 1: <!DOCTYPE html> 2: <html lang="en-US"> 3: <head> 4: <script type="text/javascript" src="CustomScript.js"></script> 5: <script src="jquery-1.4.4.js" type="text/javascript"></script 6:  7: <title>Draw on a webpage</title> 8: </head> 9: <body> 10: <canvas id="canvas" width="500" height="500"></canvas> 11: <br /> 12: <input type="submit" id="submit" value="Clear" /> 13: <h4 id="currentPosition"> 14: 0, 0 15: </h4> 16: <div id="mousedownCoords"></div> 17: </body> 18: </html> In case you’re wondering, this is not a MVC or any kind of web application. This is plain ol’ HTML even though I’m writing all this in VS 2010. You see this is a very simple, ‘gimmicks-free’ html page. I have declared a Canvas element on line 10 and a button on line 11 to clear the drawing board. I’m using jQuery / JavaScript show the current position of the mouse on the screen. This will get updated in the ‘currentPosition’ <h4> tag and I’m using the ‘mousedownCoords’ to write all the places where the mouse was clicked. This is what my page renders as: The rectangle with a background is our canvas. The coloring is due to some javascript (which we’ll see in a moment). Now let’s get to our CustomScript.js file. 1: jQuery(document).ready(function () { 2: var isFirstClick = true; 3: var canvas = document.getElementById("canvas"); 4: // getContext: Returns an object that exposes an API for drawing on the canvas 5: var canvasContext = canvas.getContext("2d"); 6: fillBackground(); 7:  8: $("#submit").click(function () { 9: clearCanvas(); 10: fillBackground(); 11: }); 12:  13: $(document).mousemove(function (e) { 14: $('#currentPosition').html(e.pageX + ', ' + e.pageY); 15: }); 16: $(document).mouseup(function (e) { 17: // on the first click 18: // set the moveTo 19: if (isFirstClick == true) { 20: canvasContext.beginPath(); 21: canvasContext.moveTo(e.pageX - 7, e.pageY - 7); 22: isFirstClick = false; 23: } 24: else { 25: // on subsequent clicks, draw a line 26: canvasContext.lineTo(e.pageX - 7, e.pageY - 7); 27: canvasContext.stroke(); 28: } 29:  30: $('#mousedownCoords').text($('#mousedownCoords').text() + '(' + e.pageX + ',' + e.pageY + ')'); 31: }); 32:  33: function fillBackground() { 34: canvasContext.fillStyle = '#a1b1c3'; 35: canvasContext.fillRect(0, 0, 500, 500); 36: canvasContext.fill(); 37: } 38:  39: function clearCanvas() { 40: // wipe-out the canvas 41: canvas.width = canvas.width; 42: // set the isFirstClick to true 43: // so the next shape can begin 44: isFirstClick = true; 45: // clear the text 46: $('#mousedownCoords').text(''); 47: } 48: })   The script only looks long and complicated, but is not. I’ll go over the main steps. Get a ‘hold’ of your canvas object and retrieve the ‘2d’ context out of it. On mousemove event, write the current x and y coordinates to the ‘currentPosition’ element. On mouseup event, check if this is the first time the user has clicked on the canvas. The coloring of the canvas is done in the fillBackground() function. We first need to start a new path. This is done by calling the beginPath() function on our context. The moveTo() function sets the starting point of our path. The lineTo() function sets the end point of the line to be drawn. The stroke() function is the one that actually draws the line on our canvas. So if you want to play with the demo, here’s how you do it. First click on the canvas (nothing visible happens on the canvas). The second click draws a line from the first click to the current coordinates and so on and so forth. Click on the ‘Clear’ button, to reset the canvas and to give your creativity a clean slate. Here’s a sample output: Happy drawing! Verdict: HTML5 and IE9 – I think we’re on to something big and great here!

    Read the article

  • Android Array Lag?

    - by Mike
    I am making a platform game for Android. It is sort of a tile based game. I added bullets and enemies with AI and a bunch of tile types. I created a simple map with no Enemies. Everything was running well and smooth until I shot a bunch of bullets randomly everywhere. A couple of hundreds of bullets later, the FPS lowered. I made a test to find out if the bullets were the problem so I made another simple map with just a tile to stand on and left it for a while. Minutes later, I played around with it a bit to check if the FPS changed and it didnt. I reloaded the same map and shot a lot of bullets. Minutes later, the FPS was visibly lower even after the number of bullets were zero. Points to note: Programmed FPS is 30 Tested on a Samsung Galaxy Y and Samsung Galaxy W Any tile, enemy, bullet that is off screen is not drawn to prevent lag Bullets collide with Tiles (if they dont collide with in 450 frames, they are removed from the array) I used List bullets = new ListArray(); I used bullets.add(new Bullet(x, y, params...)); I used for(...){ if(...){ bullets.remove(i); } } Code for bullet: private void drawBullets(Canvas canvas) { for (int i = 0; i < bullets.size(); i++) { Bullet b = bullets.get(i); b.update(canvas); //updates physics if (b.t > blm) { //if the bullet is past its expiry bullets.remove(i); i--; } else { if (svx((b.x)) > 0 && svx(b.x) < width && svy((b.y)) > 0 && svy(b.y) < height) { // if bullet is not off screen b.draw(canvas); // draw the bullet } } } } I tried searching for solutions and references but I have no luck. I'm guessing that the lag has something to do with the Array and the Bullets or Classes that I've loaded? I'm not sure! Someone please help! Thanks in advance! :)

    Read the article

  • Can you declare <canvas> methods within a template in javascript?

    - by Binarytales
    Not entirely sure I posed the question in the best way but here goes... I have been playing around with the HTML5 canvas API and have got as far as drawing a shape in the canvas and getting it to move around with the arrow keys. I then tried to move my various variables and functions to a template so I could spawn multiple shapes (that would eventually be controlled by different keys). This is what I have: function player(x, y, z, colour, speed){ this.lx = x; this.ly = y; this.speed = 10; this.playerSize = z; this.colour = colour; } playerOne = new player(100, 100, 10, "#F0F"); function persona(z, colour){ zone.fillStyle = colour; offset = 0 - (z / 2); zone.fillRect(offset, offset, z, z); } function move(x, y){ playerOne.lx = playerOne.lx + x; playerOne.ly = playerOne.ly + y; zone.clearRect(0, 0, 500, 500); zone.save(); zone.translate(playerOne.lx, playerOne.ly); persona(playerOne.playerSize, playerOne.colour); zone.restore(); } window.onkeydown = function() { var direction = this.event.keyCode; var s = playerOne.speed; // Arrow Keys if( direction == 38 && playerOne.ly >= 10){ // Up move(0,-s); } if( direction == 40 && playerOne.ly <= 490){ // Down move(0,s); } if( direction == 37 && playerOne.lx >= 10){ // Left move(-s,0); } if( direction == 39 && playerOne.lx <= 490){ // Right move(s,0); } }; window.onload = function() { zone = document.getElementById('canvas').getContext('2d'); zone.save(); zone.translate(playerOne.lx, playerOne.ly); persona(playerOne.playerSize, playerOne.colour); zone.restore(); }; So what I tried to do was move the persona function into the player template like this: function player(x, y, z, colour, speed){ this.lx = x; this.ly = y; this.speed = 10; function persona(){ zone.fillStyle = colour; var offset = 0 - (z / 2); zone.fillRect(offset, offset, z, z); } } And then where before it said persona(playerOne.playerSize, playerOne.colour); it now just says playerOne.persona(); But this is just totally flaking out and not working and I can't figure out why. I'm probably going about it all the wrong way and I think the problem is that I'm trying to manipulate the canvas.context (call zone in my script) from within a object/template. Perhaps its nothing to do with that at all and I an just not declaring my persona functions properly in the context of the template. Documentation for the canvas API is very thin on the ground and any hint in the right direction will be very much appreciated.

    Read the article

  • Matplotlib canvas drawing

    - by Morgoth
    Let's say I define a few functions to do certain matplotlib actions, such as def dostuff(ax): ax.scatter([0.],[0.]) Now if I launch ipython, I can load these functions and start a new figure: In [1]: import matplotlib.pyplot as mpl In [2]: fig = mpl.figure() In [3]: ax = fig.add_subplot(1,1,1) In [4]: run functions # run the file with the above defined function If I now call dostuff, then the figure does not refresh: In [6]: dostuff(ax) I have to then explicitly run: In [7]: fig.canvas.draw() To get the canvas to draw. Now I can modify dostuff to be def dostuff(ax): ax.scatter([0.],[0.]) ax.get_figure().canvas.draw() This re-draws the canvas automatically. But now, say that I have the following code: def dostuff1(ax): ax.scatter([0.],[0.]) ax.get_figure().canvas.draw() def dostuff2(ax): ax.scatter([1.],[1.]) ax.get_figure().canvas.draw() def doboth(ax): dostuff1(ax) dostuff2(ax) ax.get_figure().canvas.draw() I can call each of these functions, and the canvas will be redrawn, but in the case of doboth(), it will get redrawn multiple times. My question is: how could I code this, such that the canvas.draw() only gets called once? In the above example it won't change much, but in more complex cases with tens of functions that can be called individually or grouped, the repeated drawing is much more obvious, and it would be nice to be able to avoid it. I thought of using decorators, but it doesn't look as though it would be simple. Any ideas?

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 5 6 7 8 9 10 11 12 13 14 15 16  | Next Page >