HTML 5 Animated Symbols - javascript

I need to make animated symbols which show how the symbol should be drawn. Something similar to this:
http://www.handwritingforkids.com/handwrite/cursive/animation/images/animation_a.gif
How I would go about doing this in HTML5?

HTML5 <canvas> element is what you want. The canvas is a drawable context where you can create arbitrary shapes.
MDN has a tutorial for getting started with the canvas API: https://developer.mozilla.org/en/Canvas_tutorial

In pure HTML (even 5) you can't do this (note: <canvas> also requires JavaScript). Maybe, just maybe you could hack it together in HTML+CSS, but it is much easier to do it in JavaScript.
I suggest the RaphaëlJS vector graphics library

Related

Is it possible in JavaScript to create a div, put a \u#### character in that div, then copy to canvas as a putImage?

I am working with fTelnet.js - I have gotten down to the this_Font.GetChar() code and have found all characters are from a Font Sprite, it getItemData(....) changes the color where The pixel is 0x80 and colors it foreground [r][g][b][alpha], or colors it background [r][g][b][alpha].
Since Unicode goes outside what is in its 40+ fonts - I need to cheat and .createElement("div"), .innerHTML = "\u#####"; then somehow take that as ImageData so I can patch the above logic and introduce unicode support to fTelnet's canvas routine.
Does anyone know what command(s) I am needed to do this? e.g. I have spent hours trying to resolve this via Google, HTML5 Context docs, without success... mainly not knowing what I am searching for ;-)
or as I re-read this... maybe a hidden canvas, do the ctx.strokeText("\u#####", 25, 50); and then copy from that CTX as a IMAGEDATA to the displayed? (what command would I look up then?)... I normally do not dabble in 2D/3D graphics world (obviously)...
Regards,
Generally, rendering HTML to canvas is not possible - and that seems to be by design (it would make issues like tainting much harder to navigate).
But stamping one canvas on top of another is simple - you can just use the standard #drawImage call, same as with any other image you would draw on canvas.
Actually, if you look at the API documentation and click through the definitions you will see that you can use drawImage to "stamp" any instance of svg or html image, a bitmap, offscreen canvas, video or audio tags.

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

Which js library to use for creating not complicated animation with html5 canvas?

I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.
There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)
For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.

Shape tween in javascript

Is there a way to do a shape tween in javascript?
Using canvas maybe...
Shape tween as in Flash is harder to find than motion tween and simple attributes interpolation (like in JSTweener, Tween.lib, JQuery's animate(), d3's transition(), RaphaelJS's animate(), etc.). Those libraries, some cited in the other answers, don't do shape tweening.
You first need to know if you want to draw with SVG or with canvas and what library you will be using. Then, you need an interpolator, a function that will compute the transition between two given shapes, that can write a proper path in SVG or canvas. I wrote an implementation for SVG in D3.js to do some animated transitions between a lot of different shapes (using Gielis's superformula), if someone still need one. You can find an example here
If you will be doing graphics on the HTML 5 canvas element, you may want to check the Processing.js library. There is a tweening library, but you will probably find it helpful for many other things.
Processing.js uses JavaScript to draw
shapes and manipulate images on the
HTML 5 Canvas element. The code is
light-weight, simple to learn and
makes an ideal tool for visualizing
data, creating user-interfaces and
developing web-based games.
For tweening, you may want to have a look at the following:
Tween.lib - Motion Tweening for Processing.js
Motion Tweening for Processing.js
Some animated examples here combine motion|shape tweening using RaphaelJS. Check out the ones on the bottom:
http://raphaeljs.com/animation.html
For tweens in Javascript use http://coderepos.org/share/wiki/JSTweener
I use tween.js (http://learningthreejs.com/) a great library that will tween anything. If you already use jQuery I would also recommend looking into it's animate function.

Selecting a non-standard image area in a web application

This question is for a web application.
And maybe it's a stupid question but I was wondering if there is a way to
generate a polygon with 4 points, so that the user can himself drag
each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to
find anything after a few hours of search.
Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.
SVG Specs: http://www.w3.org/Graphics/SVG/
Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/
Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.
Sounds like a job for the <canvas> tag or a Flash interface.

Categories