|
JavaScript - Animating Canvas When User Scrolls
I already asked that question on Stack Overflow, however so far I haven't gotten any answers there, so I thought maybe somebody here could help me. Below is the question, copied from Stack Overflow.
I've got this problem that I've been trying to solve for a week and I'm at wit's end (which, well, most likely means my wit's not so great, since it doesn't seem to be a very hard problem; nonetheless I'm very new to Javascript and am trying to look at this as a learning experience). I wanted to have a fixed position element that would rotate as a user scrolls the page. Doing so in CSS is trivially easy, however it doesn't work all that great, especially across browsers (works fine in Chrome, but is janky in Firefox) and under stress (when I turn on FPS meter or some other stuff in Chrome Developer Tools it stops working correctly ― I assume it would also behave similarly if there was another CPU-extensive app open etc.). So I figured that animating in the canvas would be a more stable technique. Doing the basic animation in the canvas is, again, rather easy. However I started having problems while trying to emulate the CSS transition effect. In short, I'm trying to emulate a code like this: Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
#square {
margin: 50px;
width: 150px;
height: 150px;
position: fixed;
background-color: black;
transition: transform linear 0.3s;
}
</style>
<script>
window.onload = function() {
var deg = 0;
var pos = window.pageYOffset;
var square = document.getElementById('square');
window.onscroll = function() {
var npos = window.pageYOffset;
deg += (npos - pos) / 10;
pos = npos;
square.style.transform = 'rotate(' + deg + 'deg)';
}
}
</script>
</head>
<body>
<div id='square'></div>
</body>
</html>
And what I've got currently is below. This is, like, fifteenth try, and if you run it, you'll see that it kind of works but is very ugly and totally not how it should look. I have had better results before, but still not what I was looking for. Code: <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
height: 3000px;
}
canvas {
position: fixed;
}
</style>
</head>
<body>
<canvas id='canvas' width='250' height='250'></canvas>
<script>
window.onload = function() {
// some canvas geometry stuff
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.translate(125,125);
var deg = Math.PI / 180;
// initializing variables
var request = null;
var deg = 0;
var ndeg = 0;
var base_degree;
var pos = window.pageYOffset;
var time = 0;
var duration = 300; // in milliseconds
draw();
document.addEventListener('scroll', rotateStart, false);
function rotateStart() {
// at the beggining of the scroll, set the time variable and start the loop.
// if scroll continues, only set the time (thus resetting the animation),
// but don't call loop, since it's already set as a callback to requestAnimationFrame.
if (request == null) {
time = (new Date()).getTime();
loop();
}
else {
time = (new Date()).getTime();
}
}
function loop() {
// time passed as a fraction of total duration of animation. Describes our progress
var fraction = ((new Date()).getTime() - time) / duration;
if (fraction == 0) {
// if current time and old time are the same, skip this frame
request = window.requestAnimationFrame(loop);
}
else if (fraction < 1) {
base_degree = (window.pageYOffset - pos) / 10;
ndeg = deg + base_degree * fraction;
// we operate on ndeg, and preserve deg as a reference point
request = window.requestAnimationFrame(loop);
draw();
}
else {
// clean up code.
// we draw one last time at a definitive degree of rotation because
// in my experience with similar scripts it sometimes doesn't go all the way there,
// e.g. maybe it stops at fraction == 0.95 or something like that.
ndeg = deg + base_degree;
draw();
deg = ndeg;
pos = window.pageYOffset;
request = null;
}
}
function draw() {
c.save();
c.clearRect(-125,-125,250,250);
c.rotate(ndeg * deg);
c.fillRect(-75,-75,150,150);
c.restore();
}
};
</script>
</body>
</html>
Could somebody point out errors in what I'm doing, post a solution, give a hint as to what method would be preferred here, whatever? Similar TutorialsHi, Can anyone please tell me that " how to write a JavaScript function to pop up an alert() if a user scrolls down the webpage faster than a certain speed" Looking forward for a urgent reply Thanks I've been handed an html document that contains a centered, scrollable <iframe> element with a static height and width. This iframe element displays a simple html document that houses the 'terms of service' text. Their goal is to have it to where the <a href> link at the bottom that is shown to the user as 'next' is disabled until the user scrolls to the bottom of the terms of agreement box. The clickable link could be a button, image or text (no preference). They have to have it this way for legal reasons and radio buttons or checkboxes will not suffice unfortunately. Question: What is the best way to go about doing this that seems to be cross-browser friendly (especially IE7). I offer $10 via paypal for well commented method/script. Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image. Does anyone know how I can do this? I was thinking about using the OnChange method in the text input, but I cannot find any help with that online. My current Canvas Background is (In <head><script>) Code: var imgObg = new Image(); imageObj.src = "images/bg.png"; And my text input is Code: <form name="input" action="" method="get"> <input type="text" id="textboxBG" onchange="??" /> <input type="submit" value="Submit" /> </form> If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done! Hey, I had a question about this script I'm working with. I have two functions which I'm using to grow and shrink a div. The growing seems to be working fine but the shrinking function is acting very strange. By strange I mean, in Chrome it will repeatedly shrink and grow over and over. It's all pretty weird. You can view the way it's working here. I'd love any input. Code: <script type="text/javascript">
function grow1(targetid){
set_zindex = document.getElementById(targetid).style.zIndex="1";
thewidth=document.getElementById(targetid).offsetWidth;
if(thewidth<940){
document.getElementById(targetid).style.width=thewidth+10+'px';
}
else if(thewidth>=940){
clearInterval(change);
}
change=setInterval("grow1('div1')",15);
}
function shrink1(targetid){
thewidth2=document.getElementById(targetid).offsetWidth;
if(thewidth2>290){
document.getElementById(targetid).style.width=thewidth2-10+'px';
}
else if(thewidth2<=290){
clearInterval(change2);
}
change2=setInterval("shrink1('div1')",15);
}
</script>
Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me. I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? Hi, I wrote a function which animates an image which looks similar to this: Quote: function animate() { var image = document.getElementById("frontImage"); var cssLeft = image.style.left; var px = cssLeft.substring(0, cssLeft.search("px")); if (px == 100) return; px++; image.style.left = px + "px"; //alert(timage.style.left); setTimeout(this.rotate(), 1); } This seems to be working fine. However, the image goes directly to its final position (100px to the right) and does not go through all the intermediate positions. As soon as I add an alert (the one which is now commented) everything works fine. Anyone knows what the problem is? Thanks in advance for any help Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/ It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different. Picture this: A Super Mario sprite with him standing normally, but to his right is the word "Home". Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites. I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required. Anyone have any ideas or suggestions? Any help is greatly appreciated!! Is there anyway to make a text area scroll down with the page? Code: <textarea name = "scrollBox" rows = "1" cols = "10">A B C D </textarea> So it took me forever but I finally found a floating menu that works with a horizontally scrolling page - but of course, there's still a little bug. View the page he http://uconn.kappaphilambda.org/sisters.shtml As you can see, the more you scroll right, the more the menu "compacts" itself, eventually disappearing altogether. Any ideas as to how to fix it? You can view the code & script codes by viewing the source of the page. Thanks in advance :] Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. 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 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> 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? 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. 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? So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? 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 |
|||||||