|
JavaScript - Mouse Events For Canvas Elements?
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.
Similar TutorialsHi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... Hi! Just registered, because I'm trying to figure out some dragging stuff and it's not working the way I'd like and I really can't figure out why. I made a drag element (image). I just want to apply the code to this element. This is what happens: 1. I click on the image 2. I hold the mouse down and drag => the element don't follow 3. I let go of the mouse button => the element gets dragged 4. I click again => the element stops dragging This is what I would like to happen (obviously): 1. I click the image 2. Hold the mouse down and drag => element follows 3. Mouse up => element stops following Code: var dragSko;
var dragSkoUrsp;
document.onmousedown = startaKod;
document.onmouseup = musUpp;
function startaKod(e) {
if (e.target.id == 'dragsko') {
startX = e.clientX;
dragSkoUrsp = parseInt(e.target.style.left);
document.onmousemove = musFlyttDrag;
dragSko = e.target
}
function musFlyttDrag(e) {
dragsko.style.left = (dragSkoUrsp + e.clientX - startX) + 'px' ;
}
}
function musUpp(e) {
document.onmousemove = null;
}
I'd very much appriciate if some kind soul had a look and explained what I've done wrong. Hi, I am trying to fire a mouse event in IE at a particular coordinate. All the coordinates are set right before firing the event. But when the event gets fired, the client point gets changed and gets the value same as offset point. i.e., I created a mouse event with ClientPoint = (583,438) , offset= (585,481) and screen = (585,589). The event when it gets fired from the browser however has the client point as (585,481) - the rest are fine though. Can someone tell me how can I reliably fire a mouse event at a particular client point in IE? TIA srd Example of my problem: HERE The code is derived from a site offering some advice for javascript: HERE The example of mine tries to use an image as hyperlink... and use mouse events for certain actions. Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links. I've got it to work for one row in the table I'm using to attempt some kind of formatting. I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question. The idea is for viewer to see three red dots at the front of each item being offered. Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?) About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that. What I've done works for one list item... but fails for more than one. The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one. I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1. I've only posted one row's worth but the next row uses the same code with the variables incremented. And hopefully someone will look at the actual example (URL given above) and see the full code. The basic code I've put here for convience.: Code: <table>
<tr>
<td valign=top >
<A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton_0" src="./3dots.png" border="0"
alt="javascript button"></A> some nice video
<SCRIPT language="JavaScript">
var myimgobj_0 = document.images["jsbutton_0"];
function changeImage()
{
document.images["jsbutton_0"].src= "./aro1r-mo.png";
return true;
}
function changeImageBack()
{
document.images["jsbutton_0"].src = "./3dots.png";
return true;
}
function handleMDown()
{
document.images["jsbutton_0"].src = "./checks.png";
return true;
}
function handleMUp()
{
document.images["jsbutton_0"].src = "./checks.png";
return true;
}
</SCRIPT>
</tr>
</td>
I'm trying to enable/disable a textarea. I am able to do a mouseout disable, but cannot do a mouseover enable. For instance, when I click on the image, a textarea shows up. When I move my mouse to a different location, the textarea disables fine. Then when I try to move my mouse back over the textarea, it DOES NOT enable for me to write in it. What am I doing wrong? Thanks! Another bonus question, I just happen to try out this code in IE and the textareas are not showing up where I click. I assume that I'm capturing the X/Y coordinates incorrectly for an IE browser. Any pointers? ********* CODE ************* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var posx, posy; // initialize cache var cache= []; var count=0; function getMouse(e){ posx= posy= 0; var ev= (!e) ? window.event : e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX) {//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else { // old browsers return false; } } function showP(){ // object to store this coordinate var thisCoord= {}; // x & y values stored as object attributes thisCoord.posx= posx; thisCoord.posy= posy; // check the cache for this coordinate object if ( !cache[thisCoord] ) { // if it hasn't been cached yet, push it onto the stack cache.push(thisCoord); var newDiv= document.createElement("textarea"); newDiv.setAttribute("class","div3"); newDiv.setAttribute("id",count); newDiv.style.width='180px'; newDiv.style.height='45px'; newDiv.style.visibility="visible"; newDiv.style.top= (thisCoord.posy -10) +'px'; newDiv.style.left= (thisCoord.posx -6) +'px'; newDiv.setAttribute("onmouseout","this.disabled=true"); newDiv.setAttribute("onmouseover","this.disabled=false"); // append to the document BODY document.getElementsByTagName("body")[0].appendChild(newDiv); count++; } } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-size:14px;font-weight:450;color:black;} textarea[disabled='disabled'] { background:yellow; color:blue; cursor:default; } </style> </head> <body> <div id="div1" class="div1"> <img id="theImage" src="./YourImage.jpg"> </div> <script type="text/javascript"> // setup event handlers // document BODY onmousemove document.getElementsByTagName("body")[0].onmousemove= function(e){ getMouse(e); }; // the image onclick document.getElementById("theImage").onclick= showP; //onMouseOut </script> </body> </html> I'm having a problem with the <CANVAS> element in JavaScript. here's what i'm trying to do: I need 3 different canvas elements for writing a signature to. they must all 3 be visible at the same time My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas. here's my code: Code: <html>
<head>
<script language="javascript">
function WriteSignature(element, event)
{
document.addEventListener("mousemove", PenHandler, true);
document.addEventListener("mouseup", upHandler, true);
event.stopPropagation();
event.preventDefault();
function PenHandler(event)
{
var x = event.clientX;
var y = event.clientY;
// mouse event goes here
var canvas1 = document.getElementById("Canvas1");
var ctx = canvas1.getContext("2d");
var PenSize = 2;
ctx.fillStyle = "Black";
ctx.fillRect (x, y, PenSize, PenSize);
event.stopPropagation();
}
function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", PenHandler, true);
event.stopPropagation();
}
}
</script>
</head>
<body>
<Canvas id="Canvas1" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br><br>
<Canvas id="Canvas2" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br>
</body>
</html>
I am using a freebie script that changes css elements using onClick when you hit a button. I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list. 2 button examples (and js code) is: <input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" /> <input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" /> How do I convert this to a SELECT list?? Thank you! I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Hey everyone, I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one. Here's my current script. Thanks already, Joey Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;
function init(){
ctx = document.getElementById("myCvs").getContext("2d");
userWord = document.getElementById("userWord").value;
x=Math.floor(Math.random()*801)
y=Math.floor(Math.random()*601);
drawText();
setInterval("onEnterFrame()", 50);
myDiv = document.getElementById("myDiv");
for (i =0; i<=userWord.length;i++){
ds += "*";
}
myDiv.innerHTML =ds;
textSpin();
}
function textSpin(){
myChar = randomChar();
var newString = userWord.slice(0, sli);
newString +=myChar;
newString += ds.slice(sli+1, ds.length-1);
myDiv.innerHTML = newString;
if (myChar == userWord.charAt(sli)){sli++;}
if (sli<userWord.length){
t = setTimeout("textSpin()", 80);
}
}
function randomChar(){
var rc = Math.random()*26 + 97; //random lowercase char code
return String.fromCharCode(rc);
}
function onEnterFrame(){
if(a>1){as = false;}
if(a<0){as = true;}
if(as){
a+=0.01;
}else{
a-=0.01;
}
if(x>800){xs = -1}
if(x<0){xs=1}
if(y>600){ys = -1}
if(y<0){ys=1}
x+=10 *xs;
y+=10 *ys;
drawText();
}
function drawText(){
ctx.font = "20px Times New Roman";
//ctx.fillStyle= "rgb(256,256,256)";
//ctx.fillText("Hello", x, y);
ctx.fillStyle = randomColor();
ctx.fillText(userWord, x,y);
}
function randomColor(){
var r = Math.floor(Math.random()*150)+55;
var g = Math.floor(Math.random()*256)+150;
var b = Math.floor(Math.random()*20)+50;
var a = Math.random();
return "rgba("+ r+ ","+g+","+b+","+ a+")";
}
//function randomFont(){
// var s = Math.floor(Math.random()*100) +100;
// return s; //+ "px Times New Roman";}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color:#000;
}
#myDiv {
color:#FFF;
}
</style>
</head>
<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>
<br>
</center>
</body>
</html>
Hi there! How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code: Code:
function GenericFigure(context) {
this.states = ["wait", "moving", "rotating", "stop"];
this.state = this.states[0];
this.ctx = context;
this.sqrW = this.sqrH = 20;
this.ctxW = 200;
this.ctxH = 350;
this.colorsO = {
red : "#ee1515",
green : "#45d137",
blue : "#17a3f3",
orange : "#ff910f",
purple : "#680077"
};
this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
this.pickColor = function() {
var num = Math.floor(Math.random() * 5);
return this.colorsA[num];
}
}
function Rectangle(context) {
this.inheritFrom = GenericFigure;
this.inheritFrom(context);
this.width = this.sqrW;
this.height = this.sqrH * 3;
this.x = this.ctxW / 2;
this.y = 0;
this.rotation = -1;
this.setRotation = function(angle) {
this.rotation = angle;
}
this.rotate = function() {
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
this.ctx.restore();
}
this.moveDown = function() {
this.y += 20;
this.ctx.restore();
this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
this.ctx.fillRect(this.x, this.y, this.width, this.height);
this.ctx.save();
if(this.rotation > -1) {
this.rotate();
}
l("A");
}
this.draw = function() {
this.ctx.fillStyle = this.pickColor();
this.ctx.save();
this.ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//a tak można wywołać:
var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);
rect.draw();
var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);
And the third problem: Code: this.ctx.translate(this.x, 0); I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it? Any help will be much appreciated . I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like: ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.fill(); I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do. I hope I'm explaining this or asking this correctly. Thanks! -Mike So I've been making a game using html canvas. Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows) http://db.tt/ei3LlR The problem is that the shadow flickers when it is rotated. This does not happen in firefox. The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end? Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? I just cant wrap my mind around canvas. As far as I can tell theres no logical reason as to why the code would not work. Could someone take a look at it and possibly figure out whats wrong? I'm trying to intialize and draw a canvas with a simple image. I have the functions in a custom namespace in javascript. I am also using Jquery Code: var birdr = new Image();
var birdl = new Image();
$(document).ready(function(){
if(Modernizr.canvas){
var c = document.createElement('canvas');
LK.animLoad();
document.getElementById('backg-canvas').appendChild(c);
$('canvas').attr({'width':'500','height':'500','id':'canvas'});
var context = LK.returnCanvas();
context.drawImage(birdl, 400,487,10,10);
}
});
var LK = {
birdx: 400, //unused (lets just get it to draw the image first :\)
birdy: 487, //unused
animLoad: function(){
birdl.src = "images/bird2.png";
birdr.src = "images/bird.png";
//alert(birdl);
//alert(birdr);
},
returnCanvas: function(ca){
var b_canvas = LK.getCanvas();
var b_context = b_canvas.getContext('2d');
return b_context;
},
getCanvas: function(){
var a_canvas = document.getElementById('canvas');
//alert(a_canvas);
return a_canvas;
}
}
Any help would be greatly appreciate thanks. Btw safari web inspector indicates the canvas is getting properly created and appended to the container div. So that all works fine. Hello guys! I need your help! I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is: <html> <head> <title></title> </head> <body> <canvas id='chart' width='400' height='200'> <script type="text/javascript"> var canvas = document.getElementById('chart'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 10; ctx.strokeRect(0, 0, 400, 200); ctx.moveTo(0, 100); ctx.lineTo(400, 100); ctx.stroke(); </script> </body> </html> Code: <form>
<input id="a" size=4 name="neg" placeholder="1st Screen size in inch">
<input id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
<input type="submit" value="GO!" onclick="getValue()">
</form>
</div>
<canvas id="MyCanvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
function getValue()
{
var x = document.getElementById("a").value;
var y = document.getElementById("b").value;
var aWidth;
var aHeight;
var bWidth;
var bHeight;
var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}
Here, it draws canvas then disappears immediately. I guess canvases like inline width/height instead of css width/height. This solved the issue. I'm working on a project that uses HTML5 Canvas and I'm having a strange problem with stretching. I noticed it with images and thought my math might have been wrong but then I took everything out and tried drawing a simple 100x100 square and it's completely stretched out at different proportions. The code for this (small class code)- Code: function Canvas(DOMID, F)
{
this.Frame = null;
this.width = null;
this.height = null;
this.zoom = null;
this.DOM = null;
this.ctx = null;
this.offset = null;
//Constructor
this.init = function(DOMID, F)
{
this.DOM = document.getElementById(DOMID);
this.width = $(this.DOM).width();
this.height = $(this.DOM).height();
this.ctx = this.DOM.getContext("2d");
this.zoom = 1;
this.offset = {x:0,y:0};
if(F != null)
this.setFrame(F);
this.onReady();
}
//Modifiers
this.draw = function()
{
//this.ctx.drawImage(image, 0, 0);
this.ctx.beginPath();
this.ctx.fillStyle = "#ffffff";
this.ctx.rect(0,0,100,100);
this.ctx.closePath();
this.ctx.fill();
}
this.setFrame = function(F)
{
this.Frame = F;
}
//Events
this.onReady = function(){}
this.init(DOMID, F);
}
The code calling this function is in an interval- Code: window.goToCanvas = function()
{
clearTimeout(playInterval);
playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);
}
window.drawCurrentCanvas = function()
{
index = window.canvasIndex;
canvases[index].draw();
}
The page can be found here- http://micahwilliams...ewer/viewer.php I'm stumped. I hope someone can see my mistake somewhere. Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems: (1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart. (2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it. I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable? Hello, Codingforums. I have looked on Google for a solution, done a handful of things, and cannot get my script to draw to the page. Code: <html>
<head>
<script type="text/javascript" src="imageFuncs.js"></script>
<script type="text/javascript">
showImages = function() {
var drawingCanvas = document.getElementById("map");
// Check the element is in the DOM and the browser supports canvas
if (drawingCanvas.getContext) {
var ctx = drawingCanvas.getContext("2d");
var imageSources = new Array("map.jpg");
var images = new Array();
images = loadImages(imageSources);
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
img.onload = function(){
ctx.drawImage(img,0,0,screen.width,screen.height);
}
}
}
}
</script>
</head>
<body onload="showImages()">
<canvas id="map">Your browser does not support canvases...</canvas>
</body>
</html>
The problem appears on the ctx.drawImage(img,0,0,screen.width,screen.height); line. I read that the drawImage method will not draw the image if the images are not loaded, which is why I tried an onload event for img. When I run the code the way it is now, I get a attempt to run compile-and-go script on a cleared scope error from Firebug. When I remove the onload event, the script runs without errors. Either way, no image is drawn on the page. Any help? If it helps, this is the loadImages function that I used to get the array of loaded image objects: Code: function loadImages(sources){
var images = new Array();
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].src = sources[src];
}
return images;
}
Hi all, I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames. Here is the code I have so far: Code: var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;
function wave() {
setupShore();
var canvas = document.getElementById("canvas");
canvas.setAttribute("width",canWidth);
canvas.setAttribute("height",canHeight);
var ctx = canvas.getContext("2d");
createWave();
setInterval(update(ctx), 1000);
}
function update(ctx) {
if(waves.length != 0) {
drawWater(ctx);
drawShore(ctx);
drawWaves(ctx);
updateWaves();
}
}
function drawElement(ctx, x, y, width, height, fillcolor) {
ctx.fillStyle = fillcolor;
ctx.fillRect(x, y, width, height);
}
function setupShore() {
for(var i = 0; i <= canWidth/5; i++) {
shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
}
}
function createWave() {
/* Wave array setup:
[ [waveID1, [node1, node2, ..., nodeN]],
[waveID2, [node1, node2, ..., nodeN] ] */
waves.push([waveNum, []]);
for(var c = 0; c <= canWidth/5; c++){
waves[waves.length-1][1].push(canHeight);
}
waveNum = waveNum + 1;
}
function destroyWave() {
waves.shift();
}
function drawWater(ctx) {
drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}
function drawShore(ctx) {
for(var s = 0; s <= shoreline.length; s++) {
drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
}
}
function updateWaves() {
for(var u = 0; u < waves.length; u++) {
var limit = waves[u][1].length;
for(var v = 0; v < limit; v++){
var temp = waves[u][1][v]-5;
waves[u][1][v] = temp;
if(waves[u][1][v] <= shoreline[v]){
destroyWave();
}
}
}
}
function drawWaves(ctx) {
for(var w = 0; w < waves.length; w++) {
for(var n = 0; n <= waves[w][1].length; n++){
y = waves[w][1][n];
drawElement(ctx, n*5, y, 5, 5, "Purple");
}
}
}
As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms. However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move. Any idea why this is happening? I read somewhere that setInterval can be broken by one-time functions, but I'm not sure. If you'd like to see what it's currently doing in a browser, I've hosted it here. Once I've got this animating properly I can continue my project, but I've hit a roadblock. Thanks in advance for your help, I'm really stuck. Marcus |
|||||||