html5-animation

Zooming with canvas

由 倾然丶 夕夏残阳落幕 提交于 2019-12-29 03:37:10
问题 In a test application i have a canvas with a simple rectangle on it. The method draw is called every 100ms. as you can see from the code i'm using the Mousewheel to scale everything. What happens now is, that everything is scaled, but i.e. when the rectangle is at 10px,10px and i have the mouse right over it the rectangle is not under the mouse anymore after scaling. (Which is of course right because all units are scaled up to. But what i want to is, that the mouseposition is the "center of

Is there a way to detect 3G and 2G connections speed on mobile phones and handheld devices?

由 ☆樱花仙子☆ 提交于 2019-12-23 18:16:03
问题 Is there a way to detect 3G and 2G connections on mobile phones and handheld devices? Like If I want to deliver High-end Website when user is on 3G and Highly optimized version if user is on 2G. 回答1: In Android 2.2+ there's a JS object for that. You can write out a class for CSS use based on connection type. But it's not available on iOS for mobile web sites as far as I know. var connection, connectionSpeed, htmlNode, htmlClass; connection = navigator.connection || {"type":"0"}; // fallback

HTML5 Canvas animation uses 88-98% of CPU

由 别来无恙 提交于 2019-12-23 10:06:09
问题 i'm trying to animate a faux pixelated map of the world so that it transitions between different colors smoothly. i originially did this with jquery and tables but the cpu usage was very high so i thought i'd try html5 canvas instead. However, i still get very high cpu usage for this. i'm wondering if its the large array in the code (which i use to indicate where a square should be filled). any help would be deeply appreciated. <!DOCTYPE html> <html> <head> <title>canvas version</title>

Any software like blend for HTML5 canvas animation? [closed]

由 痴心易碎 提交于 2019-12-21 09:34:14
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 7 years ago . Is there any software available like blend, for working with HTML5. Especially, to do animation related stuffs. 回答1: Something like http://raphaeljs.com/ might be useful 回答2: Hype allows you to make animations in HTML5. Pretty bare-bones at the time of writing but they seem to be planning to implement most of

Frame by frame animation in HTML5 with canvas

由 拥有回忆 提交于 2019-12-18 01:19:11
问题 I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace those images frame by frame. function draw(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ // canvas animation code here: var ctx = canvas.getContext('2d'); var lhs = new Image(); lhs.src = "images/left_hnd_1.png"; lhs

Canvas arc clearing

由 北城以北 提交于 2019-12-12 10:44:37
问题 How do I overwrite an HTML5 canvas arc? I presumed this code would work but it leaves a border around it despite the fact that its exactly the same values and just a different colour.. Is there a border property I'm missing?? <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <canvas id="surface" width="300" height="300"></canvas> <script type="text/javascript"> var canvas = document.getElementById('surface'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx

CSS3 Multiple Transitions of the Same Element

由 和自甴很熟 提交于 2019-12-07 04:55:56
问题 I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete. The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones. Here's my code: ul#nav li a { /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */ background: url(images/drape2.png) 0px

Animation options HTML5 Canvas/CSS3/jQuery

由 ▼魔方 西西 提交于 2019-12-05 17:30:31
问题 I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery. One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all of this is second nature via Flash's timeline based motion tween system so i'm wondering just what is possible with new emerging technologies like HTML5 Canvas, CSS3 and jQuery? How adept are these at tween like animation? What's a good starting

Preloading HTML5 Audio in Mobile Safari

由 你。 提交于 2019-12-04 21:51:01
问题 I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it. http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/ The experience is suppose to be that when someone clicks on the banner, it pops up an ad with a loading bar. THe loading bar is loading all the images necessary for the animation. In the meantime, the audio is also getting loaded via audio tags already on in

Animation options HTML5 Canvas/CSS3/jQuery

由 时光毁灭记忆、已成空白 提交于 2019-12-04 01:54:43
I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery. One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all of this is second nature via Flash's timeline based motion tween system so i'm wondering just what is possible with new emerging technologies like HTML5 Canvas, CSS3 and jQuery? How adept are these at tween like animation? What's a good starting point to read up on? For example the flying birds at http://www.thewildernessdowntown.com/ are amazing,
订阅 html5-animation