Math.random And FillRect With HTML5 Canvas
Nov 22, 2010
I am trying to get a function to draw 5 randomly sized and colored rectangles nested within each other. Meaning each rectangle should not go outside the boundaries of the rectangle it is in. The color thing I've got down in a randomColor() function. It's the nesting rectangles inside rectangles that is confusing me (hense me being up for the past 4 hours trying to understand it) I started out with very simple code just making 5 rectangles of reducing sizes nested in each other, then added the Math.random to randomize all the sizes. Now I'm at this point and have lost my way. I added a bunch of comments in my code so maybe you'll understand what I'm trying to do.
[Code]....
View 3 Replies
ADVERTISEMENT
Mar 21, 2010
I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari.
[Code]...
View 2 Replies
View Related
Nov 1, 2011
I want to save my canvas-content to a single image-file. There are an approach using todataurl(), which works fine. But not if i draw an image-file (e.g. car.jpg or house.png) to the canvas additionally. It does not return the whole image? Here I have my simple example-code:
[Code]...
View 1 Replies
View Related
Jun 30, 2011
I'm trying to figure out how to add images to a canvas element. I found a good site, but for some reason my images turn out bigger than expected.
Here's what I use (It's from different functions in different places, but essentially that is the relevant code). Assume there is a gameObject which has all the functions that I use. I tried replacing the functions with constant values but that made no difference:
PHP Code:
Somehow the image shows up much bigger than 69 pixels width and height. When I make the canvas smaller the image scales down with the canvas. So when I make the canvas twice as small, the image becomes twice as small as well. Seems like it is not using pixels as units.
View 1 Replies
View Related
May 27, 2011
Picture:
Doing in html5 canvas, so JavaScript (was not sure where to post, but here I go...). Above is a link to picture that I need to do. It is clock-like. I will have to draw a circle, and two lines, from centre to according points on circle. That is not a problem, the thing I can not do is to fill upper and lower parts of circle that those two lines divide, so upper part of a circle should be e.g. red, and lower blue. (Plus, it would have to bi gradient, to look more appealing).
View 1 Replies
View Related
Oct 27, 2011
I have the following html file
[Code]...
Now this code works on ios safari 4.2 and later but i can't get it to work on ios safari 4.1. On 4.1 it displays the canvas but will not draw the image. The debug console shows no errors. Is there anyway to get it to work, or is 4.2 the cut off point for even the most basic canvas operations?
View 1 Replies
View Related
Aug 6, 2009
I've looked for a solution to this issue, but it seems like a little different scenario than other situations. I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid.I still want every cell filled at random on each page load, I just want to prevent the repeating.
Here's my current code:
<script type="text/javascript">
var vip_list=new Array(
new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
[Code]...
View 6 Replies
View Related
Jul 17, 2010
Is it possible to trigger mouse events with shapes drawn in an HTML5 canvas? I want to create a page with drawn elements that you can mouseover and pop up a dialogue box. I also want the shapes to react with some type of feedback. I'm hoping I can do this with javascript instead of Flash but haven't found a way to do it that's simple enough to make it worth it.
View 1 Replies
View Related
Dec 14, 2011
I am new to javascript but have been using java for quite a while. I am looking to make a random quote (out of ten possible quotes) appear in my h2 tag in a page i am working on. In java, i would make a random number generator, in javascript it looks like this:
Code:
var randomnumber=Math.floor(Math.random()*11)
Then make an if statement:
Code:
if randomnumber=1 {
var quote="Live long and prosper"
}
document.write(var quote); Could someone more experienced than me tell me if my code looks good and how would a go about getting "var quote" in my h2 tag?
View 3 Replies
View Related
Jul 20, 2005
I remember there is a programming language where you can initialize the
random number generator, so that it can - if you want - give you the exactly
same sequence of random numbers every time you initialize it with the same
parameter. Can this be done with JavaScript? I couldn't find anything in the
documentation. Basically, what I want to achieve is to obtain always the
same sequence of random numbers for the same given initialization value (but
of course different sequences for different init values).
Can this be done in JavaScript?
View 23 Replies
View Related
Nov 12, 2010
I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
I think Math random() can solve this problem, but how to do that? code...
View 9 Replies
View Related
Jun 21, 2011
I've got my code, and the task is to generate two random numbers, the user then inputs an answer for them added together, then the program checks the answer and displays either "correct" or "wrong". Here's some of my code:
Code:
<HTML>
<TITLE>Assessment Task 3 : Rohan Gardiner</TITLE>
<HEAD>
<SCRIPT LANGUAGE ="JavaScript">
function maths(){
var response;
var answer;
answer = document.questions.answer.value;
if (answer==document.adding){
response = "correct";
} else {
response = "wrong";
} document.questions.result.value = response ;
} function randoms() {
rndNum = Math.random();
Num = rndNum*20;
Num1=rndNum*10
document.write(Math.round(Num)+"+"+ Math.round(Num1));
} function adding() {
document.write(Math.round(Num) + Math.round(Num1)); }
</SCRIPT></HEAD><BODY>
<h1 align="center">Rohan Gardiner Assessment Task 3</h1>
<FORM NAME = "questions">
<SCRIPT Language=JavaScript> randoms(); </script>
=
<INPUT TYPE = "textbox" NAME = "answer" > <BR>
<INPUT NAME = "dobutton" TYPE = "button" Value = "check" onClick= "maths()">
<INPUT TYPE = "textbox" NAME = "result" >
</BODY></HTML>
View 2 Replies
View Related
Jul 12, 2011
I want to delete some lines on the canvas that i have created in HTML5 (with the <canvas> tag). I know one solution and that is using clearRect() (give this function the HEIGHT and WIDTH of the canvas and you clears the whole canvas.).But i don't want to clear the whole canvas, i only want to delete a few lines made by the function lineTo().
View 1 Replies
View Related
Mar 16, 2009
I have a menu in which is applied typeface script. Typeface 0.11 version doesn't support hover on links. There is an experimental version but doesn't work very well for me, so i tried to implement hover by myself.
Problem is: hover works pretty well changing canvas context property fillColor and then calling fill(), but the stroke on hovered voice remains on another color. Difficult to explain, so i put some test code online: TEST CODE As you can see, passing with mouse on the menu voices triggers the hover and the element change, but remains bordered in red.
[Code]...
View 5 Replies
View Related
Feb 20, 2010
the program that i want to create will first let the user input how many execution he want to perform and will determine the highest and lowest number that he inputted.
for example.
prompt: how many execution you want to perform?
i type: 5
prompt:input number:10
prompt:input number:8
prompt:input number:5
[Code]....
but it only allows for the up to inputs[6] and the code is very long. i think i can use looping in it. but i dont know to use looping in math.min and math.max.
View 4 Replies
View Related
Aug 31, 2011
I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds?
<script language="JavaScript">
images = new Array(3);
images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>";
images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>";
images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>";
[Code]...
View 4 Replies
View Related
May 21, 2007
Anyone any idea why the Math.abs() isn't working in this code? I
thought it was supposed to convert negative numbers to whole numbers?
var se = [-27, -27, -27];
var time = 100
if(se[0] < 0){
Math.abs(se[0]); //<-- this isn't converting it to a whole number
se[0] += 1;
se[0] = (se[0]/(time / 4));
}
The result I get is -1.04 when it should be 1.12
View 5 Replies
View Related
Jul 23, 2005
Javascript has a very small math function list. However there is no
reason that this list can not be extended greatly. Speed is not an
issue, unless you nest complicated calculations several levels deep. In
that case you need much more ram than a PC has to store functions
calculated in loops so that you do not have to recalculate every time
you cycle through the nest of loops. Using a HD for storage to extend
ram is much too slow for many applications.
Some functions such as hyperbolic ones are easy to add, since they are
just simple combinations of the built in javascript math functions. I
have found a few examples on the web such as Bessel functions. I found
far fewer javascript math functions than I expected on Google searches.
Thus I have had to write several functions of my own.
See http://www.cwdjr.net/math/I0L0andI1L1.html for an example of two
"functions from hell" that are very difficult to evaluate. Fortunately
there are Fortran programs that can be used as a starting point. I was
able to modify the Fortran programs to work on javascript. I have used
these functions for technical applications in the past.
The page is set up to reject the NN 4 series, because it will not
support some of the script needed such as .toExponential(n) and
to.Fixed(n)for writing output in exponential or fixed format. I was
amazed that even the old MSNTV(former WebTV) set-top box, that no
longer is being made, will even support these output formats. I wonder
about IE4. If it will not support these output formats, I can easly
block it by checking for document.getElementById.
The code works properly on the latest versions of IE6, MSN9, Firefox,
Mozilla, Netscape, and Opera. I am not selling anything, so for a
special interest page such as this, I see no need to support older
browsers.
The advantage of doing math with javascript is that it is so portable.
You can do it anywhere you can use a computer, or you can do it on your
own local computer offline. There are several math programs for PCs
that will do very much more than you can hope to do with javascript.
Unfortunately the program I would like costs about US$ 1800. Also there
are versions you can install on a server, but these also are expensive.
View 17 Replies
View Related
Mar 5, 2010
why I am getting Nan
<script type="text/javascript">
var num1;
var num2;
var num3;
[Code]....
View 3 Replies
View Related
Jun 18, 2010
<script type="text/javascript">
function countItDown(){
var current=parseFloat(document.getElementById("currentsecondscount").value);
var seconds=current;
document.getElementById("debug").innerHTML="S "+current;
var minutes=Math.floor(seconds/60);
[Code]...
im not sure why Firefox is doing this. it seems to work fine on Firefox 3.6.3 for Mac.
View 14 Replies
View Related
Nov 23, 2010
I have this simple manual photo slide show. It shows four photos and when you click the next button and it moves one photo over and one photo back for the previous button. I have to moving by changing the CSS property of 'left' by 195 pixels each move. So for it to move next it will subtract 195 pixels from the left property and for moving back it add 195 pixels to the left property. I have the code setup so when you click it changes the property of left to either -195 or 195 pixels but I need it so it actually does the math, not just give it a set value. But I don't know how to do that.code...
View 3 Replies
View Related
Feb 10, 2011
I have a website that allows users to enter complex mathematical formulas into a text field and evaluates them.
I am currently using eval() because it not only can handle all the standard mathematical functions, but also gives them access to the Math object. That way the users can use functions such as Math.max() and everything else.
I realize, though, that using eval is evil, I assume because a malicious user might throw in some more damaging javascript that would be run without checking it. (That's why eval is evil, right?)
Is there a way that I can allow my users to construct complex mathematical formulas and use the Math object (or an equivalent) without potentially opening my site up to harm?
View 3 Replies
View Related
Nov 8, 2011
Just started to learn java & came up with the following, but can't get the math.round to work. Anyone able to tell me where I'm going wrong please ? code...
View 9 Replies
View Related
Nov 10, 2005
If I have the following
2^n=a
javascript:Math.pow(2,n)=a;
and I now a how do I then find n with javascript?.
View 1 Replies
View Related
Jan 21, 2005
i have a column which have some numbers into...
and any td of this columns have class="something"...
so i want to sum the tds of that column which have the same class name when i click on the first cell..
ie
Code:
+---+
| | -> i click here
+---+
| 3 | -> class="ha"
+---+
| 4 | -> class="haha"
+---+
| 2 | -> class="ha"
+---+
| 8 | -> class="haha"
+---+
so here i want the sum in this column where the class name is "ha"...
so the sum is 3+2 = 5...
all that have to happens when i click on the first cell!
any suggestion??
View 17 Replies
View Related
Nov 7, 2006
Code:
function finalSize(){
var size = document.getElementById('size').value;
var margin = document.getElementById('margins').value;
var mirrors = document.getElemntById('mirrorsRadio').value;
var size_array = size.split('x');
var h = size_array[0];
var w = size_array[1];
var finalH = ''
var finalW = ''
if(margin > 1){
finalH = h * margin;
finalW = w * margin;
document.getElementById('finalSize').value = finalH+'x'+finalW;
}else{
newH = h * margin;
newF = w * margin;
finalH = newH + h;
finalW = newW + w;
document.getElementById('finalSize').value = finalH+'x'+finalW;
}
}
I see it's ok, but it gives me this error:
Object doesn't support this property or method.
I don't know what I'm doing wrong. All I know is PHP, but from what little I learned on Javascript, my brain is telling me I'm right, but my experience is telling me I'm wrong. XD
View 1 Replies
View Related
